@aquera/nile-elements 1.8.7 → 1.8.9

package/dist/nile-side-bar/nile-side-bar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        `\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        `\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n    \n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\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    `;\n  }\n  \n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"],"names":["NileSideBar","_l","o","constructor","this","position","collapsed","fullHeight","width","collapsedWidth","_this","_inherits","_createClass","key","value","updated","changedProps","super","has","querySelectorAll","forEach","el","toggleAttribute","style","setProperty","concat","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","Boolean","Number","customElement"],"mappings":"+7HAsBaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,mCACsDC,EAAAA,KAAAA,CAAQC,SAAqB,MAE5BD,CAAAA,KAAAA,CAASE,WAAY,CAErBF,CAAAA,KAAAA,CAAUG,YAAY,CAEtCH,CAAAA,KAAAA,CAAKI,MAAkB,IAGvBJ,CAAAA,KAAAA,CAAcK,eAAkB,IA2C7E,QAAAC,KAAA,EAzCQC,SAAA,CAAAT,CAAA,CAAAD,EAAA,SAAAW,YAAA,CAAAV,CAAA,GAAAW,GAAA,WAAAC,KAAA,CAIG,SAAAC,OAAAA,CAAQC,CAAAA,CAAAA,KAAAA,MAAAA,MAChBC,aAAAA,CAAAA,CAAAA,oBAAcD,CAAAA,GAEVA,EAAaE,GAAI,CAAA,WAAA,CAAA,EACnBd,KAAKe,gBACH,CAAA,2SAAA,CAAA,CAUAC,QAAQC,SAAAA,CAAMA,QAAAA,CAAAA,CAAAA,CAAGC,gBAAgB,WAAalB,CAAAA,MAAAA,CAAKE,cAInDU,CAAaE,CAAAA,GAAAA,CAAI,UAA2B,IAAfd,GAAAA,IAAAA,CAAKI,OACpCJ,IAAKmB,CAAAA,KAAAA,CAAMC,YAAY,iBAAmB,IAAAC,MAAA,CAAGrB,KAAKI,KAEhDQ,MAAAA,CAAAA,CAAAA,CAAAA,CAAaE,IAAI,gBAA6C,CAAA,EAAA,IAAA,GAAxBd,KAAKK,cAC7CL,EAAAA,IAAAA,CAAKmB,MAAMC,WAAY,CAAA,2BAAA,IAAAC,MAAA,CAAgCrB,IAAKK,CAAAA,cAAAA,MAAAA,CAE/D,EAEM,GAAAI,GAAA,UAAAC,KAAA,UAAAY,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gOAOZ,CAAA,KAAAhB,GAAA,UAAAiB,GAAA,CAvCM,SAAAA,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAES,MAhBqBC,IAC4BC,CAAA,CAAA,CAA1DC,CAAS,CAAA,CAAEC,KAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAA2CtC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuC,SAAA,CAAA,UAAA,CAAA,IAAA,IAEnCN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,IAAMK,CAAAA,OAAAA,CAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAkCtC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuC,SAAA,CAAA,WAAA,CAAA,IAAA,IAE3BN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,KAAMK,OAASH,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAAmCtC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuC,SAAA,CAAA,YAAA,CAAA,IAAA,IAE5CN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,KAAMM,MAAQH,CAAAA,SAAAA,CAAAA,CAAW,CAAmCtC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuC,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAG5BN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMM,CAAAA,MAAAA,CAAQH,WAAW,CAA4CtC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuC,SAAA,CAAA,gBAAA,CAAA,IAAA,gBAVtEvC,CAAWiC,CAAAA,CAAAA,CAAA,CADvBS,CAAAA,CAAc,kBACF1C"}
+{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n * @attr overlay - When set, the sidebar is taken out of normal flow and floats\n *   on top of adjacent content, so expanding it overlays the page instead of\n *   pushing siblings sideways.\n *\n * @event nile-toggle - Fired after the collapsed state changes (via the built-in\n *   expand button or the public expand()/collapse()/toggle() methods).\n *   `event.detail.collapsed` is the new state.\n *\n * @method expand() - Expand the sidebar.\n * @method collapse() - Collapse the sidebar.\n * @method toggle(force?) - Toggle, or force a specific collapsed state.\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })overlay: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        `\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        `\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n    \n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n  public expand(): void {\n    this.setCollapsed(false);\n  }\n  public collapse(): void {\n    this.setCollapsed(true);\n  }\n\n  public toggle(force?: boolean): void {\n    this.setCollapsed(force ?? !this.collapsed);\n  }\n\n  private setCollapsed(value: boolean): void {\n    if (this.collapsed === value) return;\n    this.collapsed = value;\n    this.emit('nile-toggle', { collapsed: value });\n  }\n\n  public render(): TemplateResult {\n    return html`\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    `;\n  }\n  \n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"],"names":["NileSideBar","o","constructor","this","position","collapsed","overlay","fullHeight","width","collapsedWidth","_this","_inherits","_r","_createClass","key","value","updated","changedProps","super","has","querySelectorAll","forEach","el","toggleAttribute","style","setProperty","concat","expand","setCollapsed","collapse","toggle","force","emit","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","Boolean","Number","customElement"],"mappings":"+7HAiCaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCACsDC,KAAAA,CAAQC,QAAAA,CAAqB,MAE5BD,CAAAA,KAAAA,CAASE,SAAY,CAAA,CAAA,CAAA,CAErBF,KAAAA,CAAOG,OAAAA,CAAAA,CAAY,EAEnBH,KAAAA,CAAUI,UAAAA,CAAAA,CAAY,CAEtCJ,CAAAA,KAAAA,CAAKK,KAAkB,CAAA,IAAA,CAGvBL,KAAAA,CAAcM,cAAAA,CAAkB,IA2D7E,QAAAC,KAAA,EAzDQC,SAAA,CAAAV,CAAA,CAAAW,EAAA,SAAAC,YAAA,CAAAZ,CAAA,GAAAa,GAAA,WAAAC,KAAA,CAIG,SAAAC,OAAAA,CAAQC,CAAAA,CAAAA,KAAAA,MAAAA,MAChBC,aAAAA,CAAAA,CAAAA,oBAAcD,CAEVA,GAAAA,CAAAA,CAAaE,GAAI,CAAA,WAAA,CAAA,EACnBhB,IAAKiB,CAAAA,gBAAAA,CACH,2SAUAC,CAAAA,CAAAA,OAAAA,CAAQC,SAAAA,CAAMA,QAAAA,CAAAA,CAAAA,CAAGC,eAAgB,CAAA,WAAA,CAAapB,OAAKE,SAInDY,CAAAA,EAAAA,CAAAA,CAAAA,CAAAA,CAAaE,GAAI,CAAA,OAAA,CAAA,EAA2B,IAAfhB,GAAAA,IAAAA,CAAKK,KACpCL,EAAAA,IAAAA,CAAKqB,KAAMC,CAAAA,WAAAA,CAAY,iBAAmB,IAAAC,MAAA,CAAGvB,IAAKK,CAAAA,KAAAA,MAAAA,CAAAA,CAEhDS,CAAaE,CAAAA,GAAAA,CAAI,mBAA6C,IAAxBhB,GAAAA,IAAAA,CAAKM,cAC7CN,EAAAA,IAAAA,CAAKqB,KAAMC,CAAAA,WAAAA,CAAY,2BAA6B,IAAAC,MAAA,CAAGvB,IAAKM,CAAAA,cAAAA,MAAAA,CAE/D,EACM,GAAAK,GAAA,UAAAC,KAAA,UAAAY,MAAAA,CAAAA,CACLxB,CAAAA,IAAAA,CAAKyB,YAAa,CAAA,CAAA,CAAA,CACnB,EACM,GAAAd,GAAA,YAAAC,KAAA,UAAAc,QAAAA,CAAAA,CAAAA,CACL1B,IAAKyB,CAAAA,YAAAA,CAAAA,CAAa,CACnB,CAAA,EAEM,GAAAd,GAAA,UAAAC,KAAA,UAAAe,MAAAA,CAAOC,CACZ5B,CAAAA,CAAAA,IAAAA,CAAKyB,YAAaG,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAAA,CAAU5B,IAAKE,CAAAA,SAAAA,CAClC,EAEO,GAAAS,GAAA,gBAAAC,KAAA,UAAAa,YAAAA,CAAab,CACfZ,CAAAA,CAAAA,IAAAA,CAAKE,SAAcU,GAAAA,CAAAA,GACvBZ,IAAKE,CAAAA,SAAAA,CAAYU,CACjBZ,CAAAA,IAAAA,CAAK6B,IAAK,CAAA,aAAA,CAAe,CAAE3B,SAAAA,CAAWU,CACvC,CAAA,CAAA,CAAA,EAEM,GAAAD,GAAA,UAAAC,KAAA,UAAAkB,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gOAOZ,CAAA,KAAAtB,GAAA,UAAAuB,GAAA,CAvDM,SAAAA,IAAA,CAAWC,CAChB,MAAO,CAACA,CACT,CAAA,EAES,MAlBqBC,CAAAA,GAC4BC,EAAA,CAA1DC,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,SAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAA2C7C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA8C,UAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAEnCN,EAAA,CAA3DC,CAAAA,CAAS,CAAEC,IAAMK,CAAAA,OAAAA,CAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAkC7C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA8C,UAAA,WAAA,CAAA,IAAA,EAAA,CAAA,CAE3BN,EAAA,CAA3DC,CAAAA,CAAS,CAAEC,IAAAA,CAAMK,QAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAgC7C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA8C,UAAA,SAAA,CAAA,IAAA,EAAA,CAAA,CAEzBN,CAAA,CAAA,CAA3DC,EAAS,CAAEC,IAAAA,CAAMK,QAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAmC7C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA8C,SAAA,CAAA,YAAA,CAAA,IAAA,IAE5CN,CAAA,CAAA,CAA3CC,EAAS,CAAEC,IAAAA,CAAMM,OAAQH,SAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAmC7C,CAAA8C,CAAAA,SAAAA,CAAA,YAAA,EAG5BN,CAAAA,CAAAA,CAAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,KAAMM,MAAQH,CAAAA,SAAAA,CAAAA,CAAW,KAA4C7C,CAAA8C,CAAAA,SAAAA,CAAA,qBAAA,EAZtE9C,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAWwC,EAAA,CADvBS,CAAAA,CAAc,kBACFjD"}

package/dist/nile-side-bar/nile-side-bar.css.cjs.js

@@ -1,2 +1,2 @@
-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 :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n  position: var(--sidebar-overlay-position, absolute);\n  top: 0;\n  bottom: 0;\n  height: 100%;\n}\n\n:host([overlay][position='left']) {\n  left: 0;\n}\n\n:host([overlay][position='right']) {\n  right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n  box-shadow: var(\n    --sidebar-overlay-shadow,\n    0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n  );\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n"]))));}};});
 //# sourceMappingURL=nile-side-bar.css.cjs.js.map

package/dist/nile-side-bar/nile-side-bar.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.css.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 * SideBar CSS\n */\nexport const styles = css`\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar.css.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.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 * SideBar CSS\n */\nexport const styles = css`\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n  position: var(--sidebar-overlay-position, absolute);\n  top: 0;\n  bottom: 0;\n  height: 100%;\n}\n\n:host([overlay][position='left']) {\n  left: 0;\n}\n\n:host([overlay][position='right']) {\n  right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n  box-shadow: var(\n    --sidebar-overlay-shadow,\n    0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n  );\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar/nile-side-bar.css.esm.js

@@ -1,4 +1,4 @@
-import{css as r}from"lit";const o=r`
+import{css as o}from"lit";const t=o`
  :host {
   
   top: 0;
@@ -33,6 +33,35 @@ import{css as r}from"lit";const o=r`
   transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
 }
 
+/*
+ * Overlay mode: lift the sidebar out of normal flow so expanding it floats
+ * on top of adjacent content instead of pushing siblings. Anchors to the
+ * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
+ * it to the viewport instead.
+ */
+:host([overlay]) {
+  position: var(--sidebar-overlay-position, absolute);
+  top: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+:host([overlay][position='left']) {
+  left: 0;
+}
+
+:host([overlay][position='right']) {
+  right: 0;
+}
+
+/* Elevate while expanded so it reads as floating above the page. */
+:host([overlay]:not([collapsed])) {
+  box-shadow: var(
+    --sidebar-overlay-shadow,
+    0px 8px 24px 0px rgba(119, 125, 130, 0.25)
+  );
+}
+
 :host {
   scrollbar-width: thin;
   scrollbar-color: #64748b transparent;
@@ -79,4 +108,4 @@ import{css as r}from"lit";const o=r`
 
 
 
-`;export{o as s};
+`;export{t as s};

package/dist/nile-side-bar/nile-side-bar.esm.js

@@ -1,7 +1,7 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as r}from"./nile-side-bar.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=class extends l{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[r]}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 t`
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as l}from"./nile-side-bar.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=class extends r{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[l]}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 t`
       <slot name="header" part="header"></slot>
       <div class="scroll-container" part="scroll-container">
         <slot></slot>
       </div>
       <slot name="footer" part="footer"></slot>
-    `}};e([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),e([i({type:Number,attribute:!0})],o.prototype,"width",void 0),e([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=e([s("nile-side-bar")],o);export{o as N};
+    `}};e([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"overlay",void 0),e([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),e([i({type:Number,attribute:!0})],o.prototype,"width",void 0),e([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=e([s("nile-side-bar")],o);export{o as N};

package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js

@@ -1,2 +1,2 @@
-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-expand.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 e,t,i,n,o,r,_templateObject,_templateObject2,_templateObject3,l;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){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_nileSideBarExpandCssCjsJs){o=_nileSideBarExpandCssCjsJs.s;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",l=/*#__PURE__*/function(_r){function l(){var _this;_classCallCheck(this,l);_this=_callSuper(this,l,arguments),_this.collapsed=!1,_this.expandTooltipText="Expand Sidebar",_this.collapseTooltipText="Collapse Sidebar";return _this;}_inherits(l,_r);return _createClass(l,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(l,"connectedCallback",this,3)([]);var e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"));}},{key:"toggleSidebar",value:function toggleSidebar(){var e=this.closest("nile-side-bar");if(!e)return;e.hasAttribute("collapsed")?(e.removeAttribute("collapsed"),this.collapsed=!1):(e.setAttribute("collapsed",""),this.collapsed=!0);}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <button class=\"expand-btn\" part=\"expand-btn\" @click=",">\n        ","\n      </button>\n    "])),this.toggleSidebar,this.collapsed?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n              <nile-lite-tooltip placement=\"right\" hoist content=",">\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            "])),this.expandTooltipText):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n              <nile-lite-tooltip placement=\"right\" hoist content=",">\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            "])),this.collapseTooltipText));}}],[{key:"styles",get:function get(){return[o];}}]);}(r));e([i({type:Boolean,reflect:!0})],l.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],l.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],l.prototype,"collapseTooltipText",void 0),_export("N",l=e([n("nile-side-bar-expand")],l));}};});
+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-expand.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 e,t,i,n,o,l,_templateObject,_templateObject2,_templateObject3,r;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){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;n=_litDecoratorsJs.customElement;},function(_nileSideBarExpandCssCjsJs){o=_nileSideBarExpandCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",r=/*#__PURE__*/function(_l){function r(){var _this;_classCallCheck(this,r);_this=_callSuper(this,r,arguments),_this.collapsed=!1,_this.expandTooltipText="Expand Sidebar",_this.collapseTooltipText="Collapse Sidebar";return _this;}_inherits(r,_l);return _createClass(r,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(r,"connectedCallback",this,3)([]);var e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"));}},{key:"toggleSidebar",value:function toggleSidebar(){var e=this.closest("nile-side-bar");e&&("function"==typeof e.toggle?e.toggle():e.toggleAttribute("collapsed",!e.hasAttribute("collapsed")),this.collapsed=e.hasAttribute("collapsed"));}},{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <button class=\"expand-btn\" part=\"expand-btn\" @click=",">\n        ","\n      </button>\n    "])),this.toggleSidebar,this.collapsed?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n              <nile-lite-tooltip placement=\"right\" hoist content=",">\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            "])),this.expandTooltipText):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n              <nile-lite-tooltip placement=\"right\" hoist content=",">\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            "])),this.collapseTooltipText));}}],[{key:"styles",get:function get(){return[o];}}]);}(l));e([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"collapseTooltipText",void 0),_export("N",r=e([n("nile-side-bar-expand")],r));}};});
 //# sourceMappingURL=nile-side-bar-expand.cjs.js.map

package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-expand.cjs.js","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n  @property({ type: Boolean, reflect: true })\n  collapsed: boolean = false;\n  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Sync with parent sidebar if it exists\n    const sidebar = this.closest('nile-side-bar');\n    if (sidebar) {\n      this.collapsed = sidebar.hasAttribute('collapsed');\n    }\n  }\n\n  private toggleSidebar() {\n    const sidebar = this.closest('nile-side-bar');\n    if (!sidebar) return;\n\n    const isCollapsed = sidebar.hasAttribute('collapsed');\n    if (isCollapsed) {\n      sidebar.removeAttribute('collapsed');\n      this.collapsed = false;\n    } else {\n      sidebar.setAttribute('collapsed', '');\n      this.collapsed = true;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <button class=\"expand-btn\" part=\"expand-btn\" @click=${this.toggleSidebar}>\n        ${this.collapsed\n          ? html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `\n          : html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `}\n      </button>\n    `;\n  }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-expand': NileSideBarExpand;\n  }\n}\n"],"names":["NileSideBarExpand","_r","l","constructor","this","collapsed","expandTooltipText","collapseTooltipText","_this","_inherits","_createClass","key","value","connectedCallback","super","sidebar","closest","hasAttribute","toggleSidebar","removeAttribute","setAttribute","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","type","Boolean","reflect","prototype","String","attribute","_export","customElement"],"mappings":"o/HAYaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAELC,KAAAA,CAASC,SAAY,CAAA,CAAA,CAAA,CACmCD,KAAAA,CAAiBE,iBAAW,CAAA,gBAAA,CAC5BF,KAAAA,CAAmBG,mBAAW,CAAA,kBA8CvF,QAAAC,KAAA,EA5CQC,SAAA,CAAAP,CAAA,CAAAD,EAAA,SAAAS,YAAA,CAAAR,CAAA,GAAAS,GAAA,qBAAAC,KAAA,CAIP,SAAAC,iBAAAA,CAAAA,EACEC,aAAAA,CAAAA,CAAAA,iCAEA,GAAMC,CAAAA,CAAAA,CAAUX,KAAKY,OAAQ,CAAA,eAAA,CAAA,CACzBD,IACFX,IAAKC,CAAAA,SAAAA,CAAYU,EAAQE,YAAa,CAAA,WAAA,CAAA,CAEzC,EAEO,GAAAN,GAAA,iBAAAC,KAAA,UAAAM,aAAAA,CAAAA,EACN,GAAMH,CAAAA,CAAAA,CAAUX,KAAKY,OAAQ,CAAA,eAAA,CAAA,CAC7B,IAAKD,CAAS,CAAA,OAEMA,CAAQE,CAAAA,YAAAA,CAAa,cAEvCF,CAAQI,CAAAA,eAAAA,CAAgB,aACxBf,IAAKC,CAAAA,SAAAA,CAAAA,CAAY,IAEjBU,CAAQK,CAAAA,YAAAA,CAAa,WAAa,CAAA,EAAA,CAAA,CAClChB,KAAKC,SAAY,CAAA,CAAA,CAAA,CAEpB,EAEM,GAAAM,GAAA,UAAAC,KAAA,UAAAS,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gHAC6CpB,IAAKc,CAAAA,aAAAA,CACvDd,IAAAA,CAAKC,UACHiB,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,wdACmDpB,IAAKE,CAAAA,iBAAAA,EAI5DgB,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,sdACmDpB,IAAKG,CAAAA,mBAAAA,GAMrE,CA/CDoB,KAAAA,GAAAA,UAAAA,GAAAA,CAIO,SAAAC,IAAA,EACL,MAAO,CAACC,EACT,EAED,MAVqCC,IAErCH,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KACTlC,CAAAmC,CAAAA,SAAAA,CAAA,gBAAA,EAC6BR,CAAAA,CAAAA,CAAAA,CAAA,CAAvDI,CAAS,CAAA,CAACC,KAAMI,MAAQF,CAAAA,OAAAA,CAAAA,CAAQ,EAAMG,SAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoDrC,EAAAmC,SAAA,CAAA,mBAAA,CAAA,IAAA,IAC7CR,CAAA,CAAA,CAAvDI,EAAS,CAACC,IAAAA,CAAMI,OAAQF,OAAQ,CAAA,CAAA,CAAA,CAAMG,WAAU,CAAwDrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAmC,UAAA,qBAAA,CAAA,IAAA,EAAA,CAAA,CAAAG,OAAA,KAJ9FtC,EAAiB2B,CAAA,CAAA,CAD7BY,CAAc,CAAA,sBAAA,CAAA,CAAA,CACFvC"}
+{"version":3,"file":"nile-side-bar-expand.cjs.js","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n  @property({ type: Boolean, reflect: true })\n  collapsed: boolean = false;\n  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Sync with parent sidebar if it exists\n    const sidebar = this.closest('nile-side-bar');\n    if (sidebar) {\n      this.collapsed = sidebar.hasAttribute('collapsed');\n    }\n  }\n\n  private toggleSidebar() {\n    const sidebar = this.closest('nile-side-bar') as\n      | (HTMLElement & { toggle?: (force?: boolean) => void })\n      | null;\n    if (!sidebar) return;\n    if (typeof sidebar.toggle === 'function') {\n      sidebar.toggle();\n    } else {\n      sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));\n    }\n    this.collapsed = sidebar.hasAttribute('collapsed');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <button class=\"expand-btn\" part=\"expand-btn\" @click=${this.toggleSidebar}>\n        ${this.collapsed\n          ? html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `\n          : html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n                <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `}\n      </button>\n    `;\n  }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-expand': NileSideBarExpand;\n  }\n}\n"],"names":["NileSideBarExpand","_l","r","constructor","this","collapsed","expandTooltipText","collapseTooltipText","_this","_inherits","_createClass","key","value","connectedCallback","super","sidebar","closest","hasAttribute","toggleSidebar","toggle","toggleAttribute","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","type","Boolean","reflect","prototype","String","attribute","_export","customElement"],"mappings":"o/HAYaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAELC,KAAAA,CAASC,SAAY,CAAA,CAAA,CAAA,CACmCD,KAAAA,CAAiBE,iBAAAA,CAAW,iBAC5BF,KAAAA,CAAmBG,mBAAAA,CAAW,kBA6CvF,QAAAC,KAAA,EA3CQC,SAAA,CAAAP,CAAA,CAAAD,EAAA,SAAAS,YAAA,CAAAR,CAAA,GAAAS,GAAA,qBAAAC,KAAA,CAIP,SAAAC,iBAAAA,CAAAA,CACEC,CAAAA,aAAAA,CAAAA,CAAAA,iCAEA,GAAMC,CAAAA,EAAUX,IAAKY,CAAAA,OAAAA,CAAQ,eACzBD,CAAAA,CAAAA,CAAAA,GACFX,KAAKC,SAAYU,CAAAA,CAAAA,CAAQE,YAAa,CAAA,WAAA,CAAA,CAEzC,EAEO,GAAAN,GAAA,iBAAAC,KAAA,UAAAM,aAAAA,CAAAA,CAAAA,CACN,GAAMH,CAAAA,CAAUX,CAAAA,IAAAA,CAAKY,QAAQ,eAGxBD,CAAAA,CAAAA,CAAAA,GACyB,UAAnBA,EAAAA,MAAAA,CAAAA,CAAAA,CAAQI,OACjBJ,CAAQI,CAAAA,MAAAA,CAAAA,CAAAA,CAERJ,EAAQK,eAAgB,CAAA,WAAA,CAAA,CAAcL,EAAQE,YAAa,CAAA,WAAA,CAAA,CAAA,CAE7Db,IAAKC,CAAAA,SAAAA,CAAYU,EAAQE,YAAa,CAAA,WAAA,CAAA,CACvC,EAEM,GAAAN,GAAA,UAAAC,KAAA,UAAAS,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gHAC6CpB,IAAKc,CAAAA,aAAAA,CACvDd,IAAAA,CAAKC,UACHiB,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,wdACmDpB,IAAKE,CAAAA,iBAAAA,EAI5DgB,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,sdACmDpB,IAAKG,CAAAA,mBAAAA,GAMrE,CA9CDoB,KAAAA,GAAAA,UAAAA,GAAAA,CAIO,SAAAC,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAED,MAVqCC,IAErCH,CAAAA,CAAA,CADCI,CAAS,CAAA,CAAEC,KAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KACTlC,CAAAmC,CAAAA,SAAAA,CAAA,gBAAA,EAC6BR,CAAAA,CAAAA,CAAAA,CAAA,CAAvDI,CAAS,CAAA,CAACC,KAAMI,MAAQF,CAAAA,OAAAA,CAAAA,CAAQ,EAAMG,SAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoDrC,EAAAmC,SAAA,CAAA,mBAAA,CAAA,IAAA,IAC7CR,CAAA,CAAA,CAAvDI,EAAS,CAACC,IAAAA,CAAMI,OAAQF,OAAQ,CAAA,CAAA,CAAA,CAAMG,WAAU,CAAwDrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAmC,UAAA,qBAAA,CAAA,IAAA,EAAA,CAAA,CAAAG,OAAA,KAJ9FtC,EAAiB2B,CAAA,CAAA,CAD7BY,CAAc,CAAA,sBAAA,CAAA,CAAA,CACFvC"}

package/dist/nile-side-bar-expand/nile-side-bar-expand.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{s as o}from"./nile-side-bar-expand.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let l=class extends r{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[o]}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 t`
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{s as o}from"./nile-side-bar-expand.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let r=class extends l{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[o]}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 t`
       <button class="expand-btn" part="expand-btn" @click=${this.toggleSidebar}>
         ${this.collapsed?t`
               <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
@@ -10,4 +10,4 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as
               </nile-lite-tooltip>
             `}
       </button>
-    `}};e([i({type:Boolean,reflect:!0})],l.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],l.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],l.prototype,"collapseTooltipText",void 0),l=e([n("nile-side-bar-expand")],l);export{l as N};
+    `}};e([i({type:Boolean,reflect:!0})],r.prototype,"collapsed",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"expandTooltipText",void 0),e([i({type:String,reflect:!0,attribute:!0})],r.prototype,"collapseTooltipText",void 0),r=e([n("nile-side-bar-expand")],r);export{r as N};

package/dist/src/nile-button-toggle/nile-button-toggle.css.js

@@ -39,7 +39,7 @@ export const styles = css `
   }
 
   .nile-button-toggle:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
   }
 
   .nile-button-toggle:active {
@@ -71,13 +71,13 @@ export const styles = css `
   }
 
   .nile-button-toggle__active {
-    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
+    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
   }
 
   .nile-button-toggle__active:hover {
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
   }
 
   .nile-button-toggle__disabled {

package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
+{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}

package/dist/src/nile-filter-chip/nile-filter-chip.css.js

@@ -38,14 +38,14 @@ export const styles = css `
   }
 
   .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
+    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));
   }
  .chip:active {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 :host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 

package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * 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 "]}
+{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * 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 "]}

package/dist/src/nile-list-item/nile-list-item.css.js

@@ -25,7 +25,13 @@ export const styles = css `
   }
 
   :host(:hover) {
-    background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */
+  }
+
+  :host([selected]),
+  :host([active]) {
+    background-color: var(--ng-colors-bg-brand-primary); /* Selection background */
+    color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */
   }
 
   .preffix__icon {

package/dist/src/nile-list-item/nile-list-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
+{"version":3,"file":"nile-list-item.css.js","sourceRoot":"","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}

package/dist/src/nile-menu-item/nile-menu-item.css.js

@@ -52,8 +52,8 @@ export const styles = css `
   }
 
   .menu-item.menu-item--active {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
   }
 
   .menu-item.menu-item--disabled {
@@ -92,13 +92,13 @@ export const styles = css `
   }
 
   :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
   :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
   }
 
   :host(:focus-visible) .menu-item {

package/dist/src/nile-menu-item/nile-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}

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

@@ -45,15 +45,15 @@ export const styles = css `
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
     opacity: 1;
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}
+{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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"]}

package/dist/src/nile-side-bar/nile-side-bar.css.js

@@ -43,6 +43,35 @@ export const styles = css `
   transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
 }
 
+/*
+ * Overlay mode: lift the sidebar out of normal flow so expanding it floats
+ * on top of adjacent content instead of pushing siblings. Anchors to the
+ * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
+ * it to the viewport instead.
+ */
+:host([overlay]) {
+  position: var(--sidebar-overlay-position, absolute);
+  top: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+:host([overlay][position='left']) {
+  left: 0;
+}
+
+:host([overlay][position='right']) {
+  right: 0;
+}
+
+/* Elevate while expanded so it reads as floating above the page. */
+:host([overlay]:not([collapsed])) {
+  box-shadow: var(
+    --sidebar-overlay-shadow,
+    0px 8px 24px 0px rgba(119, 125, 130, 0.25)
+  );
+}
+
 :host {
   scrollbar-width: thin;
   scrollbar-color: #64748b transparent;

package/dist/src/nile-side-bar/nile-side-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBar CSS\n */\nexport const styles = css`\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBar CSS\n */\nexport const styles = css`\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/*\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n */\n:host([overlay]) {\n  position: var(--sidebar-overlay-position, absolute);\n  top: 0;\n  bottom: 0;\n  height: 100%;\n}\n\n:host([overlay][position='left']) {\n  left: 0;\n}\n\n:host([overlay][position='right']) {\n  right: 0;\n}\n\n/* Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n  box-shadow: var(\n    --sidebar-overlay-shadow,\n    0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n  );\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar/nile-side-bar.d.ts

@@ -14,15 +14,31 @@ import NileElement from '../internal/nile-element';
  * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
  * @attr width - Expanded width of the sidebar (px).
  * @attr collapsed-width - Collapsed width of the sidebar (px).
+ * @attr overlay - When set, the sidebar is taken out of normal flow and floats
+ *   on top of adjacent content, so expanding it overlays the page instead of
+ *   pushing siblings sideways.
+ *
+ * @event nile-toggle - Fired after the collapsed state changes (via the built-in
+ *   expand button or the public expand()/collapse()/toggle() methods).
+ *   `event.detail.collapsed` is the new state.
+ *
+ * @method expand() - Expand the sidebar.
+ * @method collapse() - Collapse the sidebar.
+ * @method toggle(force?) - Toggle, or force a specific collapsed state.
  */
 export declare class NileSideBar extends NileElement {
     position: 'left' | 'right';
     collapsed: boolean;
+    overlay: boolean;
     fullHeight: boolean;
     width: number | null;
     collapsedWidth: number | null;
     static get styles(): CSSResultArray;
     protected updated(changedProps: Map<string, unknown>): void;
+    expand(): void;
+    collapse(): void;
+    toggle(force?: boolean): void;
+    private setCollapsed;
     render(): TemplateResult;
 }
 export default NileSideBar;

package/dist/src/nile-side-bar/nile-side-bar.js

@@ -17,12 +17,24 @@ import NileElement from '../internal/nile-element';
  * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
  * @attr width - Expanded width of the sidebar (px).
  * @attr collapsed-width - Collapsed width of the sidebar (px).
+ * @attr overlay - When set, the sidebar is taken out of normal flow and floats
+ *   on top of adjacent content, so expanding it overlays the page instead of
+ *   pushing siblings sideways.
+ *
+ * @event nile-toggle - Fired after the collapsed state changes (via the built-in
+ *   expand button or the public expand()/collapse()/toggle() methods).
+ *   `event.detail.collapsed` is the new state.
+ *
+ * @method expand() - Expand the sidebar.
+ * @method collapse() - Collapse the sidebar.
+ * @method toggle(force?) - Toggle, or force a specific collapsed state.
  */
 let NileSideBar = class NileSideBar extends NileElement {
     constructor() {
         super(...arguments);
         this.position = 'left';
         this.collapsed = false;
+        this.overlay = false;
         this.fullHeight = false;
         this.width = null;
         this.collapsedWidth = null;
@@ -51,6 +63,21 @@ let NileSideBar = class NileSideBar extends NileElement {
             this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
         }
     }
+    expand() {
+        this.setCollapsed(false);
+    }
+    collapse() {
+        this.setCollapsed(true);
+    }
+    toggle(force) {
+        this.setCollapsed(force ?? !this.collapsed);
+    }
+    setCollapsed(value) {
+        if (this.collapsed === value)
+            return;
+        this.collapsed = value;
+        this.emit('nile-toggle', { collapsed: value });
+    }
     render() {
         return html `
       <slot name="header" part="header"></slot>
@@ -67,6 +94,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSideBar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSideBar.prototype, "overlay", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSideBar.prototype, "fullHeight", void 0);