@aquera/nile-elements 2.0.6 → 2.0.7

package/README.md

@@ -91,6 +91,9 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.7 (September 07, 2026)
+- Nile Side Bar Header & Nile Side Bar Footer: Added a `background` property. The default keeps the sidebar surface color, and `background="transparent"` drops it so whatever sits behind the header/footer shows through (UIF-1347)
+
 #### Version 2.0.6 (September 07, 2026)
 - Nile Floating Panel: Fixed the arrow leaving a gap in the panel border — (UIF-1341)
 - Nile Popover: Fixed the panel border cutting across the base of the arrow (UIF-1342)

package/dist/index.js

@@ -19274,7 +19274,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
           ${this._renderTrigger()}
           ${e}
         </nile-popover>
-      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.2"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.6"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
+      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.2"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.7"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
   :host {
     /* Geometry. Values come from design tokens wherever one exists; the bare
        pixels are shell geometry with no matching token. */
@@ -20367,6 +20367,11 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the header sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .header-content {
   display: flex;
   align-items: center;
@@ -20399,12 +20404,12 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
   gap: var(--nile-spacing-md);
 }
 
-`;let kS=class extends Ge{static get styles(){return[SS]}render(){return R`
+`;let kS=class extends Ge{constructor(){super(...arguments),this.background="default"}static get styles(){return[SS]}render(){return R`
 		  <div class="header-content" part="header-content">
       <slot name="logo" part="logo"></slot>
       <slot name="expand" part="expand"></slot>
     </div>
-			`}};kS=e([ce("nile-side-bar-header")],kS);const ES=s`
+			`}};e([de({type:String,reflect:!0,attribute:!0})],kS.prototype,"background",void 0),kS=e([ce("nile-side-bar-header")],kS);const ES=s`
 :host {
   justify-content: center;
   height: 100%;
@@ -20714,6 +20719,11 @@ justify-content: center;
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .footer {
   display: flex;
   flex-direction: column;    
@@ -20738,11 +20748,11 @@ justify-content: center;
 
 
  
-`;let GS=class extends Ge{static get styles(){return[$S]}render(){return R`
+`;let GS=class extends Ge{constructor(){super(...arguments),this.background="default"}static get styles(){return[$S]}render(){return R`
       <div part="base" class="footer">
       <slot> </slot>
       </div>
-    `}};GS=e([ce("nile-side-bar-footer")],GS);const FS=s`
+    `}};e([de({type:String,reflect:!0,attribute:!0})],GS.prototype,"background",void 0),GS=e([ce("nile-side-bar-footer")],GS);const FS=s`
   :host {
     display: block;
     width: 100%;

package/dist/nile-side-bar-footer/nile-side-bar-footer.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-footer.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 s,t,e,r,i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _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){s=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.customElement;},function(_nileSideBarFooterCssCjsJs){r=_nileSideBarFooterCssCjsJs.s;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_i){function o(){_classCallCheck(this,o);return _callSuper(this,o,arguments);}_inherits(o,_i);return _createClass(o,[{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    "])));}}],[{key:"styles",get:function get(){return[r];}}]);}(i));_export("N",o=s([e("nile-side-bar-footer")],o));}};});
+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-footer.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,r,s,i,o,_templateObject,a;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 _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarFooterCssCjsJs){i=_nileSideBarFooterCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",a=/*#__PURE__*/function(_o){function a(){var _this;_classCallCheck(this,a);_this=_callSuper(this,a,arguments),_this.background="default";return _this;}_inherits(a,_o);return _createClass(a,[{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    "])));}}],[{key:"styles",get:function get(){return[i];}}]);}(o));t([r({type:String,reflect:!0,attribute:!0})],a.prototype,"background",void 0),_export("N",a=t([s("nile-side-bar-footer")],a));}};});
 //# sourceMappingURL=nile-side-bar-footer.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.cjs.js","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.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 } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer component.\n *\n * @tag nile-side-bar-footer\n *\n * @slot icon - Slot for footer icon\n * @slot text - Slot for footer text\n */\n@customElement('nile-side-bar-footer')\nexport class NileSideBarFooter extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer': NileSideBarFooter;\n  }\n}\n"],"names":["NileSideBarFooter","_i","o","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","customElement"],"mappings":"u6GAqBaA,CAAN,uBAAAC,EAAA,WAAAC,EAAA,EAAAC,eAAA,MAAAD,CAAA,SAAAE,UAAA,MAAAF,CAAA,CAAAG,SAAA,GAAAC,SAAA,CAAAJ,CAAA,CAAAD,EAAA,SAAAM,YAAA,CAAAL,CAAA,GAAAM,GAAA,UAAAC,KAAA,CAKE,SAAAC,MAAAA,CAAAA,CACL,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,+FAKZ,CAAA,KAAAL,GAAA,UAAAM,GAAA,CAVM,SAAAA,IAAA,CACL,CAAA,MAAO,CAACC,CAAAA,CACT,EAEM,MAL8BC,CAC9B,GADIhB,OAAAA,KAAAA,CAAiBiB,CAAAA,CAAAA,CAAA,CAD7BC,CAAAA,CAAc,yBACFlB"}
+{"version":3,"file":"nile-side-bar-footer.cjs.js","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.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-footer.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer component.\n *\n * @tag nile-side-bar-footer\n *\n * @slot icon - Slot for footer icon\n * @slot text - Slot for footer text\n *\n * @attr background - Background treatment of the footer (\"default\" | \"transparent\").\n *   Defaults to \"default\", which paints the sidebar surface color. Set to\n *   \"transparent\" to drop the background so whatever sits behind the footer shows\n *   through.\n */\n@customElement('nile-side-bar-footer')\nexport class NileSideBarFooter extends NileElement {\n  /**\n   * Background treatment of the footer. `default` keeps the sidebar surface\n   * color; `transparent` removes it.\n   */\n  @property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer': NileSideBarFooter;\n  }\n}\n"],"names":["NileSideBarFooter","a","constructor","this","background","_this","_inherits","_o","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","customElement"],"mappings":"q8GA0BaA,4BAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAKuDC,KAAAA,CAAUC,UAAAA,CAA8B,SAarG,QAAAC,KAAA,EAXQC,SAAA,CAAAL,CAAA,CAAAM,EAAA,SAAAC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,UAAAC,KAAA,CAIA,SAAAC,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,+FAKZ,CAAA,KAAAL,GAAA,UAAAM,GAAA,CAVM,SAAAA,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAEM,MAX8BC,CAAAA,GAKuBC,EAAA,CAA3DC,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,SAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,KAA0DvB,CAAAwB,CAAAA,SAAAA,CAAA,iBAAA,EALnGxB,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAiBkB,EAAA,CAD7BO,CAAAA,CAAc,yBACFzB"}

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n"]))));}};});
 //# sourceMappingURL=nile-side-bar-footer.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.css.cjs.js","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAKaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-footer.css.cjs.js","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAKaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -11,6 +11,11 @@ import{css as a}from"lit";const n=a`
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .footer {
   display: flex;
   flex-direction: column;    

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

@@ -1,5 +1,5 @@
-import{__decorate as e}from"tslib";import{html as s}from"lit";import{customElement as t}from"lit/decorators.js";import{s as r}from"./nile-side-bar-footer.css.esm.js";import{N as i}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 i{static get styles(){return[r]}render(){return s`
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as r,customElement as s}from"lit/decorators.js";import{s as i}from"./nile-side-bar-footer.css.esm.js";import{N as o}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 a=class extends o{constructor(){super(...arguments),this.background="default"}static get styles(){return[i]}render(){return e`
       <div part="base" class="footer">
       <slot> </slot>
       </div>
-    `}};o=e([t("nile-side-bar-footer")],o);export{o as N};
+    `}};t([r({type:String,reflect:!0,attribute:!0})],a.prototype,"background",void 0),a=t([s("nile-side-bar-footer")],a);export{a as N};

package/dist/nile-side-bar-header/nile-side-bar-header.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-header.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,s,r,i,_templateObject,a;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 _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){s=_litDecoratorsJs.customElement;},function(_nileSideBarHeaderCssCjsJs){r=_nileSideBarHeaderCssCjsJs.s;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",a=/*#__PURE__*/function(_i){function a(){_classCallCheck(this,a);return _callSuper(this,a,arguments);}_inherits(a,_i);return _createClass(a,[{key:"render",value:function render(){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t"])));}}],[{key:"styles",get:function get(){return[r];}}]);}(i));_export("N",a=e([s("nile-side-bar-header")],a));}};});
+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-header.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,r,s,i,a,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarHeaderCssCjsJs){i=_nileSideBarHeaderCssCjsJs.s;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_a){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.background="default";return _this;}_inherits(o,_a);return _createClass(o,[{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t"])));}}],[{key:"styles",get:function get(){return[i];}}]);}(a));t([r({type:String,reflect:!0,attribute:!0})],o.prototype,"background",void 0),_export("N",o=t([s("nile-side-bar-header")],o));}};});
 //# sourceMappingURL=nile-side-bar-header.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-header component.\n *\n * @tag nile-side-bar-header\n *\n */\n@customElement('nile-side-bar-header')\nexport class NileSideBarHeader extends NileElement {\n\n\t/**\n\t * The styles for nile-side-bar-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-header': NileSideBarHeader;\n  }\n}"],"names":["NileSideBarHeader","_i","a","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","customElement"],"mappings":"u6GAoBaA,CAAN,uBAAAC,EAAA,WAAAC,EAAA,EAAAC,eAAA,MAAAD,CAAA,SAAAE,UAAA,MAAAF,CAAA,CAAAG,SAAA,GAAAC,SAAA,CAAAJ,CAAA,CAAAD,EAAA,SAAAM,YAAA,CAAAL,CAAA,GAAAM,GAAA,UAAAC,KAAA,CAkBC,SAAAC,MAAAA,CAAAA,CACN,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,iMAMX,CAAA,KAAAL,GAAA,UAAAM,GAAA,CAnBM,SAAAA,IAAA,CACN,CAAA,MAAO,CAACC,CAAAA,CACR,EAUM,MAlB+BC,CAM/B,GANKhB,OAAAA,KAAAA,CAAiBiB,CAAAA,CAAAA,CAAA,CAD7BC,CAAAA,CAAc,yBACFlB"}
+{"version":3,"file":"nile-side-bar-header.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-header component.\n *\n * @tag nile-side-bar-header\n *\n * @attr background - Background treatment of the header (\"default\" | \"transparent\").\n *   Defaults to \"default\", which paints the sidebar surface color. Set to\n *   \"transparent\" to drop the background so whatever sits behind the header shows\n *   through.\n */\n@customElement('nile-side-bar-header')\nexport class NileSideBarHeader extends NileElement {\n\n\t/**\n\t * Background treatment of the header. `default` keeps the sidebar surface\n\t * color; `transparent` removes it.\n\t */\n\t@property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';\n\n\t/**\n\t * The styles for nile-side-bar-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t  <div class=\"header-content\" part=\"header-content\">\n      <slot name=\"logo\" part=\"logo\"></slot>\n      <slot name=\"expand\" part=\"expand\"></slot>\n    </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-header': NileSideBarHeader;\n  }\n}"],"names":["NileSideBarHeader","o","constructor","this","background","_this","_inherits","_a","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","customElement"],"mappings":"q8GAwBaA,4BAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAMsDC,KAAAA,CAAUC,UAAAA,CAA8B,SA4BpG,QAAAC,KAAA,EAtBOC,SAAA,CAAAL,CAAA,CAAAM,EAAA,SAAAC,YAAA,CAAAP,CAAA,GAAAQ,GAAA,UAAAC,KAAA,CAYA,SAAAC,MAAAA,CAAAA,CAAAA,CACN,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,iMAMX,CAAA,KAAAL,GAAA,UAAAM,GAAA,CAnBM,SAAAA,IAAA,CACN,CAAA,MAAO,CAACC,CACR,CAAA,EAUM,MAxB+BC,CAAAA,GAMsBC,EAAA,CAA3DC,CAAAA,CAAS,CAAEC,IAAMC,CAAAA,MAAAA,CAAQC,SAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,KAA0DvB,CAAAwB,CAAAA,SAAAA,CAAA,iBAAA,EANlGxB,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAiBkB,EAAA,CAD7BO,CAAAA,CAAc,yBACFzB"}

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",e=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",e=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the header sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-header.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.css.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\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-header.css.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the header sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\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-header/nile-side-bar-header.css.esm.js

@@ -11,6 +11,11 @@ import{css as n}from"lit";const e=n`
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the header sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .header-content {
   display: flex;
   align-items: center;

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

@@ -1,6 +1,6 @@
-import{__decorate as e}from"tslib";import{html as t}from"lit";import{customElement as s}from"lit/decorators.js";import{s as r}from"./nile-side-bar-header.css.esm.js";import{N as i}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 a=class extends i{static get styles(){return[r]}render(){return t`
+import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as r,customElement as s}from"lit/decorators.js";import{s as i}from"./nile-side-bar-header.css.esm.js";import{N as a}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 a{constructor(){super(...arguments),this.background="default"}static get styles(){return[i]}render(){return t`
 		  <div class="header-content" part="header-content">
       <slot name="logo" part="logo"></slot>
       <slot name="expand" part="expand"></slot>
     </div>
-			`}};a=e([s("nile-side-bar-header")],a);export{a as N};
+			`}};e([r({type:String,reflect:!0,attribute:!0})],o.prototype,"background",void 0),o=e([s("nile-side-bar-header")],o);export{o as N};

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

@@ -15,6 +15,11 @@ export const styles = css `
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .footer {
   display: flex;
   flex-direction: column;    

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the footer sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}

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

@@ -13,8 +13,18 @@ import NileElement from '../internal/nile-element';
  *
  * @slot icon - Slot for footer icon
  * @slot text - Slot for footer text
+ *
+ * @attr background - Background treatment of the footer ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the footer shows
+ *   through.
  */
 export declare class NileSideBarFooter extends NileElement {
+    /**
+     * Background treatment of the footer. `default` keeps the sidebar surface
+     * color; `transparent` removes it.
+     */
+    background: 'default' | 'transparent';
     static get styles(): CSSResultArray;
     render(): TemplateResult;
 }

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

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-side-bar-footer.css';
 import NileElement from '../internal/nile-element';
 /**
@@ -16,8 +16,21 @@ import NileElement from '../internal/nile-element';
  *
  * @slot icon - Slot for footer icon
  * @slot text - Slot for footer text
+ *
+ * @attr background - Background treatment of the footer ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the footer shows
+ *   through.
  */
 let NileSideBarFooter = class NileSideBarFooter extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Background treatment of the footer. `default` keeps the sidebar surface
+         * color; `transparent` removes it.
+         */
+        this.background = 'default';
+    }
     static get styles() {
         return [styles];
     }
@@ -29,6 +42,9 @@ let NileSideBarFooter = class NileSideBarFooter extends NileElement {
     `;
     }
 };
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBarFooter.prototype, "background", void 0);
 NileSideBarFooter = __decorate([
     customElement('nile-side-bar-footer')
 ], NileSideBarFooter);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IACzC,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAZY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAY7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer component.\n *\n * @tag nile-side-bar-footer\n *\n * @slot icon - Slot for footer icon\n * @slot text - Slot for footer text\n */\n@customElement('nile-side-bar-footer')\nexport class NileSideBarFooter extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer': NileSideBarFooter;\n  }\n}\n"]}
+{"version":3,"file":"nile-side-bar-footer.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;GAYG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACL;;;WAGG;QACyD,eAAU,GAA8B,SAAS,CAAC;IAahH,CAAC;IAXQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAb6D;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDAAmD;AALnG,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAkB7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer component.\n *\n * @tag nile-side-bar-footer\n *\n * @slot icon - Slot for footer icon\n * @slot text - Slot for footer text\n *\n * @attr background - Background treatment of the footer (\"default\" | \"transparent\").\n *   Defaults to \"default\", which paints the sidebar surface color. Set to\n *   \"transparent\" to drop the background so whatever sits behind the footer shows\n *   through.\n */\n@customElement('nile-side-bar-footer')\nexport class NileSideBarFooter extends NileElement {\n  /**\n   * Background treatment of the footer. `default` keeps the sidebar surface\n   * color; `transparent` removes it.\n   */\n  @property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer': NileSideBarFooter;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+import './nile-side-bar-footer';

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

@@ -0,0 +1,42 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-side-bar-footer';
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+/**
+ * The surface color comes from a design token, which a bare fixture does not
+ * load — so pin it on a wrapper to have something concrete to assert against.
+ */
+async function withToken(markup) {
+    const wrapper = await fixture(html `<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`);
+    const el = wrapper.querySelector('nile-side-bar-footer');
+    await el.updateComplete;
+    return el;
+}
+const backgroundOf = (el) => getComputedStyle(el).backgroundColor;
+describe('NileSideBarFooter — background', () => {
+    it('1. defaults to "default" and reflects the attribute', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        expect(el.background).to.equal('default');
+        expect(el.getAttribute('background')).to.equal('default');
+    });
+    it('2. paints the sidebar surface color by default', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+    it('3. background="transparent" removes the background', async () => {
+        const el = await withToken(html `<nile-side-bar-footer background="transparent"></nile-side-bar-footer>`);
+        expect(el.background).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+    });
+    it('4. setting the property at runtime reflects and re-styles both ways', async () => {
+        const el = await withToken(html `<nile-side-bar-footer></nile-side-bar-footer>`);
+        el.background = 'transparent';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('transparent');
+        expect(backgroundOf(el)).to.equal(TRANSPARENT);
+        el.background = 'default';
+        await el.updateComplete;
+        expect(el.getAttribute('background')).to.equal('default');
+        expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
+    });
+});
+//# sourceMappingURL=nile-side-bar-footer.test.js.map

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-footer.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,wBAAwB,CAAC;AAGhC,MAAM,WAAW,GAAG,kBAAkB,CAAC;AAEvC;;;GAGG;AACH,KAAK,UAAU,SAAS,CAAC,MAAe;IACtC,MAAM,OAAO,GAAG,MAAM,OAAO,CAC3B,IAAI,CAAA,wDAAwD,MAAM,QAAQ,CAC3E,CAAC;IACF,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAsB,CAAC;IAC9E,MAAM,EAAE,CAAC,cAAc,CAAC;IACxB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC;AAErF,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAChF,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,EAAE,GAAG,MAAM,SAAS,CACxB,IAAI,CAAA,wEAAwE,CAC7E,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC;QAEhF,EAAE,CAAC,UAAU,GAAG,aAAa,CAAC;QAC9B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAE/C,EAAE,CAAC,UAAU,GAAG,SAAS,CAAC;QAC1B,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport './nile-side-bar-footer';\nimport type { NileSideBarFooter } from './nile-side-bar-footer';\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\n\n/**\n * The surface color comes from a design token, which a bare fixture does not\n * load — so pin it on a wrapper to have something concrete to assert against.\n */\nasync function withToken(markup: unknown) {\n  const wrapper = await fixture<HTMLDivElement>(\n    html`<div style=\"--nile-colors-neutral-100: rgb(1, 2, 3)\">${markup}</div>`\n  );\n  const el = wrapper.querySelector('nile-side-bar-footer') as NileSideBarFooter;\n  await el.updateComplete;\n  return el;\n}\n\nconst backgroundOf = (el: NileSideBarFooter) => getComputedStyle(el).backgroundColor;\n\ndescribe('NileSideBarFooter — background', () => {\n  it('1. defaults to \"default\" and reflects the attribute', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n    expect(el.background).to.equal('default');\n    expect(el.getAttribute('background')).to.equal('default');\n  });\n\n  it('2. paints the sidebar surface color by default', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n\n  it('3. background=\"transparent\" removes the background', async () => {\n    const el = await withToken(\n      html`<nile-side-bar-footer background=\"transparent\"></nile-side-bar-footer>`\n    );\n    expect(el.background).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n  });\n\n  it('4. setting the property at runtime reflects and re-styles both ways', async () => {\n    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);\n\n    el.background = 'transparent';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('transparent');\n    expect(backgroundOf(el)).to.equal(TRANSPARENT);\n\n    el.background = 'default';\n    await el.updateComplete;\n    expect(el.getAttribute('background')).to.equal('default');\n    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');\n  });\n});\n"]}

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.d.ts

@@ -0,0 +1,4 @@
+import '../nile-app-shell/nile-app-shell';
+import '../nile-side-bar/nile-side-bar';
+import './nile-side-bar-header';
+import '../nile-side-bar-footer/nile-side-bar-footer';

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.js

@@ -0,0 +1,68 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import '../nile-app-shell/nile-app-shell';
+import '../nile-side-bar/nile-side-bar';
+import './nile-side-bar-header';
+import '../nile-side-bar-footer/nile-side-bar-footer';
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+const SURFACE = 'rgb(1, 2, 3)';
+/**
+ * nile-app-shell owns the nav track's surface, so it forces the slotted
+ * sidebar's own background off:
+ *
+ *   ::slotted([slot='side-nav']) {
+ *     background: var(--nile-app-shell-side-nav-bg, transparent) !important;
+ *   }
+ *
+ * That reaches the `nile-side-bar` only. The header and footer live one level
+ * deeper — they are light-DOM children of the sidebar, slotted into ITS shadow
+ * root — so the shell cannot see them, and their own surface color survives.
+ * These tests pin that boundary down, because it is the whole reason
+ * `background="transparent"` exists.
+ */
+async function shellWithSidebar(headerBg, footerBg) {
+    const el = await fixture(html `
+    <nile-app-shell style="width: 1400px; height: 600px; --nile-colors-neutral-100: ${SURFACE};">
+      <nile-side-bar slot="side-nav">
+        <nile-side-bar-header slot="header" background="${headerBg ?? 'default'}">
+          <span slot="logo">Logo</span>
+        </nile-side-bar-header>
+        <nile-side-bar-footer slot="footer" background="${footerBg ?? 'default'}">
+          <span>Help</span>
+        </nile-side-bar-footer>
+      </nile-side-bar>
+      <span slot="top-bar">Title</span>
+      <p>page</p>
+    </nile-app-shell>
+  `);
+    await waitUntil(() => el.hasAttribute('has-side-nav'));
+    const sidebar = el.querySelector('nile-side-bar');
+    const header = el.querySelector('nile-side-bar-header');
+    const footer = el.querySelector('nile-side-bar-footer');
+    await header.updateComplete;
+    await footer.updateComplete;
+    return { el, sidebar, header, footer };
+}
+const bg = (el) => getComputedStyle(el).backgroundColor;
+describe('side-bar header/footer inside nile-app-shell', () => {
+    it('1. the shell strips the sidebar\'s own background', async () => {
+        const { sidebar } = await shellWithSidebar();
+        expect(bg(sidebar)).to.equal(TRANSPARENT);
+    });
+    it('2. without the new property the header/footer keep painting a surface, which is the seam', async () => {
+        const { header, footer } = await shellWithSidebar();
+        expect(bg(header)).to.equal(SURFACE);
+        expect(bg(footer)).to.equal(SURFACE);
+    });
+    it('3. background="transparent" closes the seam — nav track is one flat surface', async () => {
+        const { sidebar, header, footer } = await shellWithSidebar('transparent', 'transparent');
+        expect(bg(sidebar)).to.equal(TRANSPARENT);
+        expect(bg(header)).to.equal(TRANSPARENT);
+        expect(bg(footer)).to.equal(TRANSPARENT);
+    });
+    it('4. the shell\'s !important rule does not override the header/footer either way', async () => {
+        const { header, footer } = await shellWithSidebar('default', 'transparent');
+        expect(bg(header)).to.equal(SURFACE);
+        expect(bg(footer)).to.equal(TRANSPARENT);
+    });
+});
+//# sourceMappingURL=nile-side-bar-app-shell.test.js.map

package/dist/src/nile-side-bar-header/nile-side-bar-app-shell.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-app-shell.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-app-shell.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8CAA8C,CAAC;AAKtD,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,OAAO,GAAG,cAAc,CAAC;AAE/B;;;;;;;;;;;;;GAaG;AACH,KAAK,UAAU,gBAAgB,CAAC,QAAiB,EAAE,QAAiB;IAClE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA;sFACyC,OAAO;;0DAEnC,QAAQ,IAAI,SAAS;;;0DAGrB,QAAQ,IAAI,SAAS;;;;;;;GAO5E,CAAC,CAAC;IACH,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAC;IACjE,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAsB,CAAC;IAC7E,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAsB,CAAC;IAC7E,MAAM,MAAM,CAAC,cAAc,CAAC;IAC5B,MAAM,MAAM,CAAC,cAAc,CAAC;IAC5B,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AACzC,CAAC;AAED,MAAM,EAAE,GAAG,CAAC,EAAe,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC;AAErE,QAAQ,CAAC,8CAA8C,EAAE,GAAG,EAAE;IAC5D,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,gBAAgB,EAAE,CAAC;QAC7C,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0FAA0F,EAAE,KAAK,IAAI,EAAE;QACxG,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,gBAAgB,EAAE,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACzF,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC1C,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACzC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gFAAgF,EAAE,KAAK,IAAI,EAAE;QAC9F,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC5E,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, fixture, html, waitUntil } from '@open-wc/testing';\nimport '../nile-app-shell/nile-app-shell';\nimport '../nile-side-bar/nile-side-bar';\nimport './nile-side-bar-header';\nimport '../nile-side-bar-footer/nile-side-bar-footer';\nimport type { NileAppShell } from '../nile-app-shell/nile-app-shell';\nimport type { NileSideBarHeader } from './nile-side-bar-header';\nimport type { NileSideBarFooter } from '../nile-side-bar-footer/nile-side-bar-footer';\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)';\nconst SURFACE = 'rgb(1, 2, 3)';\n\n/**\n * nile-app-shell owns the nav track's surface, so it forces the slotted\n * sidebar's own background off:\n *\n *   ::slotted([slot='side-nav']) {\n *     background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n *   }\n *\n * That reaches the `nile-side-bar` only. The header and footer live one level\n * deeper — they are light-DOM children of the sidebar, slotted into ITS shadow\n * root — so the shell cannot see them, and their own surface color survives.\n * These tests pin that boundary down, because it is the whole reason\n * `background=\"transparent\"` exists.\n */\nasync function shellWithSidebar(headerBg?: string, footerBg?: string) {\n  const el = await fixture<NileAppShell>(html`\n    <nile-app-shell style=\"width: 1400px; height: 600px; --nile-colors-neutral-100: ${SURFACE};\">\n      <nile-side-bar slot=\"side-nav\">\n        <nile-side-bar-header slot=\"header\" background=\"${headerBg ?? 'default'}\">\n          <span slot=\"logo\">Logo</span>\n        </nile-side-bar-header>\n        <nile-side-bar-footer slot=\"footer\" background=\"${footerBg ?? 'default'}\">\n          <span>Help</span>\n        </nile-side-bar-footer>\n      </nile-side-bar>\n      <span slot=\"top-bar\">Title</span>\n      <p>page</p>\n    </nile-app-shell>\n  `);\n  await waitUntil(() => el.hasAttribute('has-side-nav'));\n\n  const sidebar = el.querySelector('nile-side-bar') as HTMLElement;\n  const header = el.querySelector('nile-side-bar-header') as NileSideBarHeader;\n  const footer = el.querySelector('nile-side-bar-footer') as NileSideBarFooter;\n  await header.updateComplete;\n  await footer.updateComplete;\n  return { el, sidebar, header, footer };\n}\n\nconst bg = (el: HTMLElement) => getComputedStyle(el).backgroundColor;\n\ndescribe('side-bar header/footer inside nile-app-shell', () => {\n  it('1. the shell strips the sidebar\\'s own background', async () => {\n    const { sidebar } = await shellWithSidebar();\n    expect(bg(sidebar)).to.equal(TRANSPARENT);\n  });\n\n  it('2. without the new property the header/footer keep painting a surface, which is the seam', async () => {\n    const { header, footer } = await shellWithSidebar();\n    expect(bg(header)).to.equal(SURFACE);\n    expect(bg(footer)).to.equal(SURFACE);\n  });\n\n  it('3. background=\"transparent\" closes the seam — nav track is one flat surface', async () => {\n    const { sidebar, header, footer } = await shellWithSidebar('transparent', 'transparent');\n    expect(bg(sidebar)).to.equal(TRANSPARENT);\n    expect(bg(header)).to.equal(TRANSPARENT);\n    expect(bg(footer)).to.equal(TRANSPARENT);\n  });\n\n  it('4. the shell\\'s !important rule does not override the header/footer either way', async () => {\n    const { header, footer } = await shellWithSidebar('default', 'transparent');\n    expect(bg(header)).to.equal(SURFACE);\n    expect(bg(footer)).to.equal(TRANSPARENT);\n  });\n});\n"]}

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

@@ -21,6 +21,11 @@ export const styles = css `
   background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
+/* Opt-in: drop the surface color so the header sits on whatever is behind it. */
+:host([background='transparent']) {
+  background: transparent;
+}
+
 .header-content {
   display: flex;
   align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n/* Opt-in: drop the surface color so the header sits on whatever is behind it. */\n:host([background='transparent']) {\n  background: transparent;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}

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

@@ -11,8 +11,17 @@ import NileElement from '../internal/nile-element';
  *
  * @tag nile-side-bar-header
  *
+ * @attr background - Background treatment of the header ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the header shows
+ *   through.
  */
 export declare class NileSideBarHeader extends NileElement {
+    /**
+     * Background treatment of the header. `default` keeps the sidebar surface
+     * color; `transparent` removes it.
+     */
+    background: 'default' | 'transparent';
     /**
      * The styles for nile-side-bar-header
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`

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

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-side-bar-header.css';
 import NileElement from '../internal/nile-element';
 /**
@@ -14,8 +14,21 @@ import NileElement from '../internal/nile-element';
  *
  * @tag nile-side-bar-header
  *
+ * @attr background - Background treatment of the header ("default" | "transparent").
+ *   Defaults to "default", which paints the sidebar surface color. Set to
+ *   "transparent" to drop the background so whatever sits behind the header shows
+ *   through.
  */
 let NileSideBarHeader = class NileSideBarHeader extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Background treatment of the header. `default` keeps the sidebar surface
+         * color; `transparent` removes it.
+         */
+        this.background = 'default';
+        /* #endregion */
+    }
     /**
      * The styles for nile-side-bar-header
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -38,6 +51,9 @@ let NileSideBarHeader = class NileSideBarHeader extends NileElement {
 			`;
     }
 };
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBarHeader.prototype, "background", void 0);
 NileSideBarHeader = __decorate([
     customElement('nile-side-bar-header')
 ], NileSideBarHeader);