@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.0

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

@@ -1 +1 @@
-{"version":3,"file":"nile-divider.css.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,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 * Divider CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n\n\t.divider {\n\t\tbackground-color: var(--nile-colors-neutral-400);;\n\t}\n\t\n\t.horizontal {\n\t\theight: 2px;\n\t\t/* width: 100%; */\n\t\tmargin: 8px 0;\n\t}\n\n\t.vertical {\n\t\theight: 100%;\n\t\twidth: 2px;\n\t\tmargin: 0 8px;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\n\t.inset.horizontal {\n\t\tmargin-left: 72px;\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-divider.css.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,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 * Divider CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n\n\t.divider {\n\t\tbackground-color: var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));\n\t\tdisplay: flex;\n    \talign-items: center;\n    \tjustify-content: center;\n\t}\n\t\n\t.horizontal {\n\t\theight: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));\n\t\t/* width: 100%; */\n\t\tmargin: 8px 0;\n\t}\n\n\t.vertical {\n\t\theight: 100%;\n\t\twidth: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));\n\t\tmargin: 0 8px;\n\t\t/* display: inline-block;\n\t\tvertical-align: middle; */\n\t}\n\n\t.inset.horizontal {\n\t\tmargin-left: 72px;\n\t}\n\t.background-white{\n\t\tbackground: var(--nile-colors-white-base , var(--ng-colors-fg-white));\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-5 , var(--ng-font-size-text-lg));\n\t\tfont-weight: var(--nile-hero-text-font-weight , var(--ng-font-weight-600)) ;\n\t\tmax-width: var(--nile-sizes-width-xxs , var(--ng-spacing-80));\n\t\ttext-overflow: ellipsis;\n\t}\n\t.horizontal-content-padding{\n\t\tpadding: var(--nile-spacing-spacing-none , var(--ng-spacing-none)) var(--nile-type-scale-2 , var(--ng-spacing-md));\n\t\toverflow: auto;\n\t}\n\t.vertical-content-padding{\n\t\tpadding: var(--nile-type-scale-2 , var(--ng-spacing-md)) var(--nile-spacing-spacing-none , var(--ng-spacing-none))\n\t}\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-divider/nile-divider.d.ts

@@ -20,6 +20,7 @@ export declare class NileDivider extends NileElement {
     static get styles(): CSSResultArray;
     inset: boolean;
     vertical: boolean;
+    label: string;
     /**
      * Render method
      * @slot This is a slot test

package/dist/src/nile-divider/nile-divider.js

@@ -20,6 +20,7 @@ let NileDivider = class NileDivider extends NileElement {
         super(...arguments);
         this.inset = false;
         this.vertical = false;
+        this.label = '';
         /* #endregion */
     }
     /**
@@ -37,8 +38,9 @@ let NileDivider = class NileDivider extends NileElement {
      */
     render() {
         return html `
-			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
-			`;
+		<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}">
+			<span part="dividier-label" class="background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}">${this.label}</span>
+		</div>`;
     }
 };
 __decorate([
@@ -47,6 +49,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileDivider.prototype, "vertical", void 0);
+__decorate([
+    property({ reflect: true })
+], NileDivider.prototype, "label", void 0);
 NileDivider = __decorate([
     customElement('nile-divider')
 ], NileDivider);

package/dist/src/nile-divider/nile-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-divider.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QASqC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAgB5D,gBAAgB;IACjB,CAAC;IAzBA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;wCAC2B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;IAC1G,CAAC;IACJ,CAAC;CAGD,CAAA;AAlB2C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;0CAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;6CAAkB;AAVhD,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2BvB;;AAED,eAAe,WAAW,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-divider.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile divider component.\n *\n * @tag nile-divider\n *\n */\n@customElement('nile-divider')\nexport class NileDivider extends NileElement {\n\n\t/**\n\t * The styles for nile-divider\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\t@property({ type: Boolean, reflect:true }) inset = false;\n\t@property({ type: Boolean, reflect:true }) vertical = false;\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\t<div part=\"divider\" class=\"divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}\"></div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileDivider;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-divider': NileDivider;\n  }\n}"]}
+{"version":3,"file":"nile-divider.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QASqC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAC/B,UAAK,GAAG,EAAE,CAAC;QAiBxC,gBAAgB;IACjB,CAAC;IA3BA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAKD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;uCAC0B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;yDACpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,KAAK,IAAI,CAAC,KAAK;SACxI,CAAC;IACT,CAAC;CAGD,CAAA;AApB2C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;0CAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;6CAAkB;AAC/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAY;AAX5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6BvB;;AAED,eAAe,WAAW,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-divider.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile divider component.\n *\n * @tag nile-divider\n *\n */\n@customElement('nile-divider')\nexport class NileDivider extends NileElement {\n\n\t/**\n\t * The styles for nile-divider\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\t@property({ type: Boolean, reflect:true }) inset = false;\n\t@property({ type: Boolean, reflect:true }) vertical = false;\n\t@property({ reflect: true }) label = '';\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 part=\"divider\" class=\"divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}\">\n\t\t\t<span part=\"dividier-label\" class=\"background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}\">${this.label}</span>\n\t\t</div>`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileDivider;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-divider': NileDivider;\n  }\n}"]}

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

@@ -11,7 +11,7 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
-    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900);
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));
   }
 
   :host *,
@@ -26,9 +26,9 @@ export const styles = css `
 
   :host {
     --size: 25rem;
-    --header-spacing: 1.25rem;
-    --body-spacing: 1.25rem;
-    --footer-spacing: 1.25rem;
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
 
     display: contents;
   }
@@ -59,8 +59,8 @@ export const styles = css `
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));
     overflow: auto;
     pointer-events: all;
   }
@@ -111,8 +111,8 @@ export const styles = css `
 
   .drawer__title {
     flex: 1 1 auto;
-    font: inherit;
-    font-size: 1.25rem;
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-lg));
     line-height: 1.4;
     padding: var(--header-spacing);
     margin: 0;
@@ -132,7 +132,7 @@ export const styles = css `
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
   }
 
   .drawer__body {
@@ -145,7 +145,7 @@ export const styles = css `
 
   .drawer__footer {
     text-align: right;
-    padding: var(--footer-spacing);
+    padding: var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6)) var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6));
   }
 
   .drawer__footer ::slotted(nile-button:not(:last-of-type)) {
@@ -177,7 +177,7 @@ export const styles = css `
 
   @media (forced-colors: active) {
     .drawer__panel {
-      border: solid 1px hsl(0, 0%, 100%);
+      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));
     }
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,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 * Drawer CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900);\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    --size: 25rem;\n    --header-spacing: 1.25rem;\n    --body-spacing: 1.25rem;\n    --footer-spacing: 1.25rem;\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: hsl(0, 0%, 100%);\n    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-size: 1.25rem;\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.5rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing);\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  .drawer__close:hover {\n    cursor:pointer;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px hsl(0, 0%, 100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,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 * Drawer CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));\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    --size: 25rem;\n    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-5));\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-lg));\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.5rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6)) var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6));\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  .drawer__close:hover {\n    cursor:pointer;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -38,10 +38,10 @@ export const styles = css `
   }
 
   .dropdown__panel {
-    font-size: 1rem;
-    font-weight: 400;
-    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-    border-radius: 0.25rem;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
+    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));
+    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     pointer-events: none;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"nile-dropdown.css.js","sourceRoot":"","sources":["../../../src/nile-dropdown/nile-dropdown.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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 * Dropdown CSS\n */\nexport const styles = css`\n:host {\n    display: inline-block;\n  }\n\n  .dropdown::part(popup) {\n    z-index: 900;\n  }\n\n  .dropdown[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .dropdown[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .dropdown[data-current-placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .dropdown[data-current-placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .dropdown__trigger {\n    display: block;\n  }\n\n  .dropdown__panel {\n    font-size: 1rem;\n    font-weight: 400;\n    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);\n    border-radius: 0.25rem;\n    pointer-events: none;\n  }\n\n  .dropdown--open .dropdown__panel {\n    display: block;\n    pointer-events: all;\n  }\n\n  /* When users slot a menu, make sure it conforms to the popup's auto-size */\n  ::slotted(nile-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-dropdown.css.js","sourceRoot":"","sources":["../../../src/nile-dropdown/nile-dropdown.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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 * Dropdown CSS\n */\nexport const styles = css`\n:host {\n    display: inline-block;\n  }\n\n  .dropdown::part(popup) {\n    z-index: 900;\n  }\n\n  .dropdown[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .dropdown[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .dropdown[data-current-placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .dropdown[data-current-placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .dropdown__trigger {\n    display: block;\n  }\n\n  .dropdown__panel {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    pointer-events: none;\n  }\n\n  .dropdown--open .dropdown__panel {\n    display: block;\n    pointer-events: all;\n  }\n\n  /* When users slot a menu, make sure it conforms to the popup's auto-size */\n  ::slotted(nile-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.css.js

@@ -11,57 +11,55 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display:inline-flex;
-    min-width:var(--nile-empty-state-max-width);
-    max-width:var(--nile-empty-state-min-width);
     width:100%;
   }
 
   .empty-state--sm {
-    --nile-es-text-size:16px;
-    --nile-es-text-line-height:24px;
-    --nile-es-subtext-size:14px;
+    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-es-subtext-line-height:20px;
     
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:118px;
     --nile-es-img-width:152px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
-    --nile-es-text-gap:0px;
+    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
   }
 
   .empty-state--md {
-    --nile-es-text-size:18px;
-    --nile-es-text-line-height:28px;
-    --nile-es-subtext-size:14px;
-    --nile-es-subtext-line-height:20px;
+    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
 
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:128px;
     --nile-es-img-width:172px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md);
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .empty-state--lg {
-    --nile-es-text-size:20px;
-    --nile-es-text-line-height:30px;
-    --nile-es-subtext-size:16px;
-    --nile-es-subtext-line-height:24px;
+    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
+    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
 
-    --nile-es-icon-size:56px;
-    --nile-es-flat-option-border-radius:10px;
+    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
     --nile-es-img-height:160px;
     --nile-es-img-width:220px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md)
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .empty-state {
@@ -85,47 +83,23 @@ export const styles = css `
   .empty-state__body--content {
     position:relative;
   }
-  .empty-state__image {    
-    background:var(--nile-empty-state-image);
-    background-size: var(--nile-es-img-width) var(--nile-es-img-height);
-    height: var(--nile-es-img-height);
-    width: var(--nile-es-img-width);
-    max-width: 100%;
-  }
-
-  .empty-state__image--grayscale {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    filter: grayscale(100%);
-  }
 
   .empty-state__img__icon {
-    height: var(--nile-es-icon-size);
-    aspect-ratio:1 / 1;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background: var(--nile-colors-neutral-500);
-    position:absolute;
-    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
-    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
+    display: var(--ng-display-flex);
+    justify-content: center;
+    align-items: center;
   }
 
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
+    background: linear-gradient(180deg, var(--nile-colors-neutral-100, var(--ng-color-graylightmode-50)) 0%, var(--nile-colors-neutral-400, var(--ng-color-graylightmode-200)) 100%);
     width: 104px;
     height: 104px;
-    border-radius: 50%;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
     display:flex;
     justify-content:center;
     align-items:center;
   }
 
-  .empty-state__body--flat {
-  }
-
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
@@ -134,7 +108,7 @@ export const styles = css `
     background-color: white;
     display: grid;
     place-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .empty__state__text-section {
@@ -146,7 +120,8 @@ export const styles = css `
 
   .empty-state__text {
     font-size: var(--nile-es-text-size);
-    font-weight: 600;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
     line-height: var(--nile-es-text-line-height);
     text-align: center;
     font-style: normal;
@@ -154,10 +129,11 @@ export const styles = css `
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
-    font-weight: 400;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
-    color:var(--nile-colors-dark-500);
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     font-style: normal;
   }
 

package/dist/src/nile-empty-state/nile-empty-state.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    min-width:var(--nile-empty-state-max-width);\n    max-width:var(--nile-empty-state-min-width);\n    width:100%;\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size:16px;\n    --nile-es-text-line-height:24px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl);\n    --nile-es-text-gap:0px;\n  }\n\n  .empty-state--md {\n    --nile-es-text-size:18px;\n    --nile-es-text-line-height:28px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n\n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md);\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size:20px;\n    --nile-es-text-line-height:30px;\n    --nile-es-subtext-size:16px;\n    --nile-es-subtext-line-height:24px;\n\n    --nile-es-icon-size:56px;\n    --nile-es-flat-option-border-radius:10px;\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md)\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n  .empty-state__image {    \n    background:var(--nile-empty-state-image);\n    background-size: var(--nile-es-img-width) var(--nile-es-img-height);\n    height: var(--nile-es-img-height);\n    width: var(--nile-es-img-width);\n    max-width: 100%;\n  }\n\n  .empty-state__image--grayscale {\n    -webkit-filter: grayscale(100%);\n    -moz-filter: grayscale(100%);\n    -o-filter: grayscale(100%);\n    -ms-filter: grayscale(100%);\n    filter: grayscale(100%);\n  }\n\n  .empty-state__img__icon {\n    height: var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--nile-colors-neutral-500);\n    position:absolute;\n    left: calc(50% - calc(var(--nile-es-icon-size) / 2));\n    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));\n  }\n\n  .empty-state__body--tonal {\n    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);\n    width: 104px;\n    height: 104px;\n    border-radius: 50%;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .empty-state__body--flat {\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-weight: 600;\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-weight: 400;\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500);\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    width:100%;\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n  }\n\n  .empty-state--md {\n    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    display: var(--ng-display-flex);\n    justify-content: center;\n    align-items: center;\n  }\n\n  .empty-state__body--tonal {\n    background: linear-gradient(180deg, var(--nile-colors-neutral-100, var(--ng-color-graylightmode-50)) 0%, var(--nile-colors-neutral-400, var(--ng-color-graylightmode-200)) 100%);\n    width: 104px;\n    height: 104px;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.d.ts

@@ -24,6 +24,9 @@ export declare class NileEmptyState extends NileElement {
     grayscale: boolean;
     text: String;
     subText: String;
+    svgIconUrl: string;
+    svgIconSize: number;
+    svgIconColor: string;
     /**
      * Render method
      * @slot This is a slot test

package/dist/src/nile-empty-state/nile-empty-state.js

@@ -10,6 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
 /**
  * Nile empty-state component.
  *
@@ -25,6 +26,7 @@ let NileEmptyState = class NileEmptyState extends NileElement {
         this.grayscale = false;
         this.text = 'Empty State';
         this.subText = 'No Data';
+        this.svgIconSize = 40;
         /* #endregion */
     }
     /**
@@ -52,23 +54,34 @@ let NileEmptyState = class NileEmptyState extends NileElement {
 
         ${this.variant == 'content' ? html `
         <div class="empty-state__body--content">
-          
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
-          ${!this.icon ? nothing : html `
+          ${!this.icon && !this.svgIconUrl ? nothing : html `
           <div class="empty-state__img__icon">
-            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+            ${this.svgIconUrl ? html `
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+              <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
+            ` : html `
+              <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+            `}
           </div>`}
         </div>` : nothing}
 				
 			  ${this.variant == 'tonal' ? html `
 				<div class="empty-state__body--tonal">
-					<nile-icon name="${this.icon}" size="40"></nile-icon>
+					${this.svgIconUrl ? html `
+            <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+          ` : html `
+            <nile-icon name="${this.icon}" size="40"></nile-icon>
+          `}
 				</div>` : nothing}
 
 			  ${this.variant == 'flat' ? html `
 				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
-						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+						${this.svgIconUrl ? html `
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+            ` : html `
+              <nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+            `}
 					</span>
 				</div>` : nothing}
       
@@ -103,6 +116,15 @@ __decorate([
 __decorate([
     property({ attribute: 'sub-text' })
 ], NileEmptyState.prototype, "subText", void 0);
+__decorate([
+    property()
+], NileEmptyState.prototype, "svgIconUrl", void 0);
+__decorate([
+    property({ type: Number })
+], NileEmptyState.prototype, "svgIconSize", void 0);
+__decorate([
+    property({ type: String })
+], NileEmptyState.prototype, "svgIconColor", void 0);
 NileEmptyState = __decorate([
     customElement('nile-empty-state')
 ], NileEmptyState);

package/dist/src/nile-empty-state/nile-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;QA4D9D,gBAAgB;IAClB,CAAC;IAhFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;oBACc,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAEjD,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;+BAGX,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,+BAA+B,EAAC,IAAI,CAAC,SAAS,EAAG,CAAC;YAC5G,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;+BAER,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBAE3G;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEb,IAAI,CAAC,IAAI;WACtB,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;yBAGX,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;WAEtF,CAAA,CAAC,CAAC,OACL;;;2CAGmC,IAAI,CAAC,IAAI;8CACN,IAAI,CAAC,OAAO;;;;;;;;GAQvD,CAAC;IACF,CAAC;CAGF,CAAA;AAxEa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;AArBnD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkF1B;;AAED,eAAe,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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          \n          <div src=\"\" class=\"${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}\"></div>\n          ${!this.icon ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAwB,IAAI,CAAC;QAEjC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;QAEpC,gBAAW,GAAW,EAAE,CAAC;QAuEnD,gBAAgB;IAClB,CAAC;IA7FC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAkBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;oBACc,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAEjD,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;YAE9B,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;cAE7C,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;0CACM,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,WAAW,YAAY,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;+CAC7E,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,WAAW,YAAY,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;aACtI,CAAC,CAAC,CAAC,IAAI,CAAA;iCACa,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;aAC1G;iBAEH;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;OAE9B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;wCACW,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,WAAW,YAAY,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;WAC/G,CAAC,CAAC,CAAC,IAAI,CAAA;+BACa,IAAI,CAAC,IAAI;WAC7B;WACA,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;QAG5B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;0CACY,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,WAAW,gCAAgC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;aACnI,CAAC,CAAC,CAAC,IAAI,CAAA;iCACa,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;aAC5F;;WAEF,CAAA,CAAC,CAAC,OACL;;;2CAGmC,IAAI,CAAC,IAAI;8CACN,IAAI,CAAC,OAAO;;;;;;;;GAQvD,CAAC;IACF,CAAC;CAGF,CAAA;AArFa;IAAX,QAAQ,EAAE;4CAAkC;AAEjC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;AAClD;IAAX,QAAQ,EAAE;kDAAoB;AACL;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mDAA0B;AACzB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDAAsB;AAxBpC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+F1B;;AAED,eAAe,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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg'  = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n  @property() svgIconUrl: string;\n  @property({type: Number}) svgIconSize: number = 40;\n  @property({type: String}) svgIconColor: string;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          ${!this.icon && !this.svgIconUrl ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            ${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n              <!-- <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${this.svgIconColor ? this.svgIconColor : '#ddd'}\"></nile-icon> -->\n            ` : html`\n              <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n            `}\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t${this.svgIconUrl ? html`\n            <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n          ` : html`\n            <nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n          `}\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t${this.svgIconUrl ? html`\n              <nile-icon customSvgPath=\"${this.svgIconUrl}\" size=\"${this.svgIconSize}\" variant=\"secondary\" color=\"${ifDefined(this.svgIconColor)}\" noFill></nile-icon>\n            ` : html`\n              <nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n            `}\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}

package/dist/src/nile-error-message/nile-error-message.css.js

@@ -10,62 +10,58 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
+    --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);
+    --ng-nile-private-max-width: var(--nile-width-535px, var(--ng-width-120));
+    --ng-nile-private-max-height: var(--nile-height-48px, var(--ng-height-48px));
   }
 
   .nile-error-message {
     width: 100%;
-    word-break: break-all;
-    font-size: var(--nile-font-size-small);
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
     letter-spacing: 0.2px;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-font-size-small);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
+    max-width: var(--nile-error-max-width, var(--ng-nile-private-max-width)); 
   }
 
   .nile-error-message__error {
-    color: var(--nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     word-break: break-word;
   }
 
   .nile-error-message__response {
-    color: var(--nile-colors-dark-500);
-    margin-top:6px;
-    line-height: 16px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    max-height: var(--nile-error-max-height, var(--ng-nile-private-max-height));
+    overflow-x: auto;
   }
 
   .nile-error-message__icon {
     vertical-align: middle;
-    margin-right:2px;
+    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
   }
 
   .nile-error-message__more-button {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     cursor: pointer;
     white-space: nowrap;
     display: inline-flex;
-    gap: 4px;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     align-items: center
   }
 
   .nile-error-message__response-expanded {
-    line-height: 18px;
+    line-height: var(--nile-line-height-small);
     height: auto;
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: 4px;
-    margin-top: 12px;
-    padding: 12px;
-    background: var(--nile-colors-neutral-100);
-  }
-
-  .nile-error-message__response-expanded {
     max-height: 100px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: 4px;
-    margin-top: 12px;
-    padding: 12px;
-    background: var(--nile-colors-neutral-100);
+    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
     transition: max-height 0.3s ease-in-out;
     flex-shrink: 0;
   }
@@ -75,14 +71,14 @@ export const styles = css `
     overflow: hidden;
     transition: max-height 0.3s ease-in-out;
     visibility: hidden;
-    padding: 0 12px;
+    padding: var(--nile-spacing-none) var(--nile-spacing-none);
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: 100px;
+    max-height: var(--nile-error-max-dialog-height, var(--ng-nile-private-max-height));
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 12px;
+    padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));
   }
 `;
 export default [styles];

package/dist/src/nile-error-message/nile-error-message.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-error-message {\n    width: 100%;\n    word-break: break-all;\n    font-size: var(--nile-font-size-small);\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-font-size-small);\n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700);\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500);\n    margin-top:6px;\n    line-height: 16px;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right:2px;\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n    display: inline-flex;\n    gap: 4px;\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: 18px;\n    height: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .nile-error-message__response-expanded {\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500);\n    border-left: 6px solid var(--nile-colors-red-500);\n    border-radius: 4px;\n    margin-top: 12px;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: 0 12px;\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: 100px;\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: 12px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n    --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);\n    --ng-nile-private-max-width: var(--nile-width-535px, var(--ng-width-120));\n    --ng-nile-private-max-height: var(--nile-height-48px, var(--ng-height-48px));\n  }\n\n  .nile-error-message {\n    width: 100%;\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));\n    letter-spacing: 0.2px;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));\n    max-width: var(--nile-error-max-width, var(--ng-nile-private-max-width)); \n  }\n\n  .nile-error-message__error {\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    word-break: break-word;\n  }\n\n  .nile-error-message__response {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    max-height: var(--nile-error-max-height, var(--ng-nile-private-max-height));\n    overflow-x: auto;\n  }\n\n  .nile-error-message__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n  }\n\n  .nile-error-message__more-button {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    cursor: pointer;\n    white-space: nowrap;\n    display: inline-flex;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    align-items: center\n  }\n\n  .nile-error-message__response-expanded {\n    line-height: var(--nile-line-height-small);\n    height: auto;\n    max-height: 100px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--nile-colors-red-500, var(--ng-colors-border-error));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n    transition: max-height 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .nile-error-message__response-expanded.collapsed {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease-in-out;\n    visibility: hidden;\n    padding: var(--nile-spacing-none) var(--nile-spacing-none);\n  }\n\n  .nile-error-message__response-expanded.expanded {\n    max-height: var(--nile-error-max-dialog-height, var(--ng-nile-private-max-height));\n    transition: max-height 0.3s ease-in-out;\n    visibility: visible;\n    padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));\n  }\n`;\n\nexport default [styles];\n"]}