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

package/dist/src/nile-error-message/nile-error-message.d.ts

@@ -9,12 +9,16 @@ export declare class NileErrorMessage extends LitElement {
     errorResponse: string;
     errorResponseLong: string;
     isExpanded: boolean;
+    maxWidth: string;
+    maxHeight: string;
+    maxDialogHeight: string;
     private readonly MAX_LENGTH;
     /**
      * Get a truncated version of the errorResponse if it's too long.
      * @returns {string}
      */
     getTruncatedResponse(): string;
+    updated(changedProperties: Map<string, any>): void;
     /**
      * Toggle the expanded state of the error response.
      */

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

@@ -28,6 +28,17 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
         }
         return this.errorResponse;
     }
+    updated(changedProperties) {
+        if (changedProperties.has('maxWidth')) {
+            this.style.setProperty('--nile-error-max-width', this.maxWidth);
+        }
+        if (changedProperties.has('maxHeight')) {
+            this.style.setProperty('--nile-error-max-height', this.maxHeight);
+        }
+        if (changedProperties.has('maxDialogHeight')) {
+            this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);
+        }
+    }
     /**
      * Toggle the expanded state of the error response.
      */
@@ -43,7 +54,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="var(--nile-colors-red-700)"
+          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 
@@ -58,7 +69,7 @@ let NileErrorMessage = class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600)" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
               </span
             > ` : ``}
             </div>
@@ -88,6 +99,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileErrorMessage.prototype, "isExpanded", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: String })
+], NileErrorMessage.prototype, "maxDialogHeight", void 0);
 NileErrorMessage = __decorate([
     customElement('nile-error-message')
 ], NileErrorMessage);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA8D5C,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAoBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;8FACkC,QAAQ;;eAEvF,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA5EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAlBjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmF5B","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700)\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAW1B,eAAU,GAAY,KAAK,CAAC;QAQ5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IA0E5C,CAAC;IApGQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IA0BD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAChD,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,iBAAmC;QACzC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClE,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACpE,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAA;;cAEA,IAAI,CAAC,aAAa;cAClB,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,IAAI,CAAA;;;uBAGC,IAAI,CAAC,cAAc;iBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;qIACyE,QAAQ;;eAE9H,CAAA,CAAC,CAAA,EAAE;;aAEL;YACL,CAAC,CAAC,EAAE;;;yDAG6C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;CACF,CAAA;AA9FC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAEA;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAyB;AAxBzC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqG5B","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  // Represents the error message to be displayed to the user.\n  @property({ type: String })\n  errorMessage: string = '';\n\n  // Represents additional details about the error, like stack trace or other info.\n  @property({ type: String })\n  errorResponse: string;\n\n  // Extended error information\n  @property({ type: String })\n  errorResponseLong: string;\n\n  @property({ type: Boolean })\n  isExpanded: boolean = false;\n\n  @property({ type: String }) maxWidth: string;\n\n  @property({ type: String }) maxHeight: string;\n\n  @property({ type: String }) maxDialogHeight: string;\n\n  // The maximum length before truncation.\n  private readonly MAX_LENGTH: number = 100;\n\n  /**\n   * Get a truncated version of the errorResponse if it's too long.\n   * @returns {string}\n   */\n  getTruncatedResponse(): string {\n    if (this.errorResponse.length > this.MAX_LENGTH) {\n      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n    }\n    return this.errorResponse;\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('maxWidth')) {\n      this.style.setProperty('--nile-error-max-width', this.maxWidth);\n    }\n    if (changedProperties.has('maxHeight')) {\n      this.style.setProperty('--nile-error-max-height', this.maxHeight);\n    }\n    if (changedProperties.has('maxDialogHeight')) {\n      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n    }\n  }\n\n  /**\n   * Toggle the expanded state of the error response.\n   */\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n      <div class=\"nile-error-message\" part=\"base\">\n        <nile-icon\n          name=\"info2\"\n          size=\"14\"\n          class=\"nile-error-message__icon\"\n          part=\"icon\"\n          color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))\"\n        ></nile-icon>\n        <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n        ${this.errorResponse\n        ? html`\n            <div class=\"nile-error-message__response\">\n            ${this.errorResponse}\n            ${this.errorResponseLong\n                ? html`\n              <span\n              class=\"nile-error-message__more-button\"\n              @click=${this.toggleExpanded}\n              >${this.isExpanded ? 'View Less' : 'View More'}\n              <nile-icon color=\"var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n              </span\n            > `:``}\n            </div>\n            `\n        : ``}\n\n        <div\n          class=\"nile-error-message__response-expanded ${this.isExpanded\n            ? 'expanded'\n            : 'collapsed'}\"\n        >\n          ${this.errorResponseLong}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-error-message': NileErrorMessage;\n  }\n}\n"]}

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

@@ -10,28 +10,28 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
-    --indication-color: var(--nile-colors-red-500);
+    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
   }
 
   .nile-error-notification {
-    font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
     letter-spacing: 0.2px;
     border: 1px solid var(--indication-color);
-    border-left: 6px solid var(--indication-color);
-    border-radius: 4px;
-    padding: 8px;
-    background: var(--nile-colors-neutral-100);
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
     color: var(--indication-color);
     box-sizing: border-box;
   }
 
   .nile-error-notification__icon {
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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 * ErrorNotification CSS\n */\nexport const styles = css`\n  :host {\n    --indication-color: var(--nile-colors-red-500);\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: 6px solid var(--indication-color);\n    border-radius: 4px;\n    padding: 8px;\n    background: var(--nile-colors-neutral-100);\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: 4px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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 * ErrorNotification CSS\n */\nexport const styles = css`\n  :host {\n    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  .nile-error-notification {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    letter-spacing: 0.2px;\n    border: 1px solid var(--indication-color);\n    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));\n    color: var(--indication-color);\n    box-sizing: border-box;\n  }\n\n  .nile-error-notification__icon {\n    vertical-align: middle;\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -22,31 +22,31 @@ export const styles = css `
     align-items: center;
     height: 30px;
     padding: 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
+    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default);
-    color: var(--nile-filter-chip-text-default);
+    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));
+    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
     box-sizing: border-box;
   }
 
   .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background);
+    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
   }
  .chip:active {
-  background-color: var(--nile-filter-chip-active-background);
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 :host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background);
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 
 
   .icon {
-    color: var(--nile-filter-chip-icon-color-default);
+    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -57,7 +57,7 @@ export const styles = css `
 
   .label {
     font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default);
+    color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));
   }
 
   nile-badge::part(base) {
@@ -88,7 +88,7 @@ export const styles = css `
 
 
  .value {
-  color: var(--nile-filter-chip-values-color-default);
+  color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -99,7 +99,7 @@ export const styles = css `
 
 
   .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default);
+    color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -108,8 +108,8 @@ export const styles = css `
   }
 
   .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background);
-    color: var(--nile-filter-chip-close-icon-hover-color);
+    background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));
+    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));
   }
 
 .label-wrapper {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    height: 30px;\n    padding: 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);\n    border-radius: 4px;\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default);\n    color: var(--nile-filter-chip-text-default);\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    box-sizing: border-box;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background);\n  }\n .chip:active {\n  background-color: var(--nile-filter-chip-active-background);\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n  background-color: var(--nile-filter-chip-active-background);\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default);\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n .value {\n  color: var(--nile-filter-chip-values-color-default);\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n  vertical-align: bottom;\n}\n\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background);\n    color: var(--nile-filter-chip-close-icon-hover-color);\n  }\n\n.label-wrapper {\n  margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n  margin-right: 6px;\n}\n\n.value-wrapper {\n  margin-right: 4px; \n}\n\n.badge-wrapper {\n  margin-right: 12px;  \n}\n\n`;\n\nexport default [styles];\n\n "]}
+{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    height: 30px;\n    padding: 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    box-sizing: border-box;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));\n  }\n .chip:active {\n  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n .value {\n  color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n  vertical-align: bottom;\n}\n\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n  }\n\n.label-wrapper {\n  margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n  margin-right: 6px;\n}\n\n.value-wrapper {\n  margin-right: 4px; \n}\n\n.badge-wrapper {\n  margin-right: 12px;  \n}\n\n`;\n\nexport default [styles];\n\n "]}

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

@@ -15,19 +15,19 @@ export const styles = css `
   .nile-form-error-message {
     display: flex;
     align-items: center;
-    color: var(--nile-form-error-text-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-form-error-text-font-size);
+    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));
+    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));
+    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
-    line-height: var(--nile-form-error-text-line-height);
+    font-weight: var(--nile-font-weight-regular, var(--ng-nile-font-weight-regular));
+    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));
     letter-spacing: 0.2px;
-    margin-top: 6px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .nile-form-error-message__icon {
-    margin-right: 6px;
+    display: var(--nile-display-inline-block, var(--ng-display-none));
+    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-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;;;;;;;;;;;;;;;;;;;;;CAqBxB,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 * FormErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-form-error-message {\n    display: flex;\n    align-items: center;\n    color: var(--nile-form-error-text-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-form-error-text-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 12px;\n    line-height: var(--nile-form-error-text-line-height);\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n  }\n\n  .nile-form-error-message__icon {\n    margin-right: 6px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-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;;;;;;;;;;;;;;;;;;;;;CAqBxB,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 * FormErrorMessage CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-form-error-message {\n    display: flex;\n    align-items: center;\n    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));\n    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));\n    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-nile-font-weight-regular));\n    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .nile-form-error-message__icon {\n    display: var(--nile-display-inline-block, var(--ng-display-none));\n    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -31,7 +31,7 @@ let NileFormErrorMessage = class NileFormErrorMessage extends LitElement {
     render() {
         return html `
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700)"> </nile-icon> <slot> </slot>
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
         </div>
 			`;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,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-form-error-message.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-error-message\n *\n */\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/**\n\t * The styles for FormErrorMessage\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      <div class=\"nile-form-error-message\">\n       <nile-icon name=\"info2\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700)\"> </nile-icon> <slot> </slot>\n        </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-error-message': NileFormErrorMessage;\n  }\n}\n"]}
+{"version":3,"file":"nile-form-error-message.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAEnD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AA3BY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA2BhC;;AAED,eAAe,oBAAoB,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-form-error-message.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-error-message\n *\n */\n@customElement('nile-form-error-message')\nexport class NileFormErrorMessage extends LitElement {\n\n\t/**\n\t * The styles for FormErrorMessage\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      <div class=\"nile-form-error-message\">\n       <nile-icon name=\"info2\" size=\"14\" class=\"nile-form-error-message__icon\" color=\"var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))\"> </nile-icon> <slot> </slot>\n        </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileFormErrorMessage;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-error-message': NileFormErrorMessage;\n  }\n}\n"]}

package/dist/src/nile-form-group/nile-form-group.css.js

@@ -18,67 +18,71 @@ export const styles = css `
     flex-direction: column;
     min-width: var(--min-width);
     width: max-content;
-    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
-    border-radius: var(--nile-radius-base-standard);
-    border: 1px solid var(--nile-colors-neutral-400);
-    background: var(--nile-colors-white-base);
-    font-family: var(--nile-font-family-serif);
+    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));
+    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
   }
 
   .form__header {
     width: 100%;
-    height: 82px;
     box-sizing: border-box;
-    padding: var(--nile-spacing-3-x);
     display: flex;
-    flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--nile-spacing-1-x);
-    border-radius: var(--nile-radius-base-standard)
-      var(--nile-radius-base-standard) 0 0;
-    background: var(--nile-colors-neutral-100);
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+  }
+  
+  .form__divider {
+    width: 100%;
+  }
+
+  .form__divider::part(divider) {
+    width: 100%;
+    height: 1px;
+    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
   .form__title-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--nile-spacing-1-x);
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
     justify-content:centre;
   }
 
-
-
   .form__title {
     display: block;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-4);
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
     font-style: normal;
-    font-weight: 500;
-    line-height: var(--nile-type-scale-4);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
     letter-spacing: 0.2px;
   }
 
   .form__subtitle {
     display: block;
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .form__body {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--nile-spacing-3-x);
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-3-x);
+    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));
   }
 `;
 export default [styles];

package/dist/src/nile-form-group/nile-form-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-group.css.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,CAAC;AACF,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 * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\n  }\n\n  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n    border-radius: var(--nile-radius-base-standard);\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n    font-family: var(--nile-font-family-serif);\n  }\n\n  .form__header {\n    width: 100%;\n    height: 82px;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x);\n    border-radius: var(--nile-radius-base-standard)\n      var(--nile-radius-base-standard) 0 0;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x);\n    justify-content:centre;\n  }\n\n\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--nile-type-scale-4);\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-2);\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x);\n  }\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-group.css.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC;AACF,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 * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\n  }\n\n  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n  \n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:centre;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-form-group/nile-form-group.js

@@ -39,7 +39,7 @@ let NileFormGroup = class NileFormGroup extends NileElement {
      */
     render() {
         return html `
-      <div class="form__base">
+      <div part="base" class="form__base">
         ${this.title
             ? html ` <div class="form__header">
               <div class="form__title-content">
@@ -53,8 +53,10 @@ let NileFormGroup = class NileFormGroup extends NileElement {
                 : ``}
               </div>
 
-              <slot name="action" class="form__action"> </slot>
-            </div>`
+              <slot name="action" class="form__action"></slot>
+            </div>
+            <nile-divider class="form__divider"></nile-divider>
+            `
             : ``}
         <div class="form__body">
           <slot></slot>

package/dist/src/nile-form-group/nile-form-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-group.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QAWL,kFAAkF;QACvC,UAAK,GAAG,EAAE,CAAC;QAEtD,wFAAwF;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAqCzD,gBAAgB;IAClB,CAAC;IAlDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAQD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEI,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;0DAE0C,IAAI,CAAC,KAAK;kBAClD,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;0BAEE,IAAI,CAAC,QAAQ;;qBAElB;gBACH,CAAC,CAAC,EAAE;;;;mBAIH;YACT,CAAC,CAAC,EAAE;;;;;KAKT,CAAC;IACJ,CAAC;CAGF,CAAA;AApDuB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAAiC;AAWX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AAGX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAf9C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqDzB;;AAED,eAAe,aAAa,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-form-group.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile Form Group component.\n *\n * @tag nile-form-group\n *\n */\n@customElement('nile-form-group')\nexport class NileFormGroup extends NileElement {\n  @query('.form__body') nileformgroup: HTMLInputElement;\n\n  /**\n   * The styles for FormGroup\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  /** The Form Title . If you need to display HTML, use the `title` slot instead. */\n  @property({ type: String, reflect: true }) title = '';\n\n  /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */\n  @property({ type: String, reflect: true }) subtitle = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"form__base\">\n        ${this.title\n          ? html` <div class=\"form__header\">\n              <div class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> ${this.title} </slot>\n                ${this.subtitle\n                  ? html`\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ${this.subtitle}\n                      </slot>\n                    `\n                  : ``}\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"> </slot>\n            </div>`\n          : ``}\n        <div class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileFormGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-group': NileFormGroup;\n  }\n}\n"]}
+{"version":3,"file":"nile-form-group.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QAWL,kFAAkF;QACvC,UAAK,GAAG,EAAE,CAAC;QAEtD,wFAAwF;QAC7C,aAAQ,GAAG,EAAE,CAAC;QAuCzD,gBAAgB;IAClB,CAAC;IApDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAQD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEI,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;0DAE0C,IAAI,CAAC,KAAK;kBAClD,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;0BAEE,IAAI,CAAC,QAAQ;;qBAElB;gBACH,CAAC,CAAC,EAAE;;;;;;aAMT;YACH,CAAC,CAAC,EAAE;;;;;KAKT,CAAC;IACJ,CAAC;CAGF,CAAA;AAtDuB;IAArB,KAAK,CAAC,aAAa,CAAC;oDAAiC;AAWX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AAGX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAf9C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuDzB;;AAED,eAAe,aAAa,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-form-group.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile Form Group component.\n *\n * @tag nile-form-group\n *\n */\n@customElement('nile-form-group')\nexport class NileFormGroup extends NileElement {\n  @query('.form__body') nileformgroup: HTMLInputElement;\n\n  /**\n   * The styles for FormGroup\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  /** The Form Title . If you need to display HTML, use the `title` slot instead. */\n  @property({ type: String, reflect: true }) title = '';\n\n  /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */\n  @property({ type: String, reflect: true }) subtitle = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"form__base\">\n        ${this.title\n          ? html` <div class=\"form__header\">\n              <div class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> ${this.title} </slot>\n                ${this.subtitle\n                  ? html`\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ${this.subtitle}\n                      </slot>\n                    `\n                  : ``}\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider class=\"form__divider\"></nile-divider>\n            `\n          : ``}\n        <div class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileFormGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-group': NileFormGroup;\n  }\n}\n"]}

package/dist/src/nile-form-help-text/nile-form-help-text.css.js

@@ -11,19 +11,19 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     width:100%;
-    color: var(--nile-form-help-text-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-form-help-text-font-size);
+    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));
     font-style: normal;
-    line-height: var(--nile-form-help-text-line-height);
+    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));
   }
 
   .nile-form-help-text {
     display:flex;
-    font-weight: 400;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     letter-spacing: 0.2px;
-    margin-top: 6px;
-    margin-right: 4px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));
     width: auto;
   }
 
@@ -34,8 +34,8 @@ export const styles = css `
 
   .nile-form-help-text__more-button {
     display: inline-flex;
-    gap: 4px;
-    color: var(--nile-colors-primary-600);
+    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));
     cursor: pointer;
     white-space: nowrap;
     align-items: center;
@@ -47,7 +47,7 @@ export const styles = css `
     white-space: nowrap;
     display:inline;
   }
-  
+
   .help__text__full--expanded{
     white-space: wrap;
   }

package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,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 * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-form-help-text-font-size);\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height);\n  }\n\n  .nile-form-help-text {\n    display:flex;\n    font-weight: 400;\n    letter-spacing: 0.2px;\n    margin-top: 6px;\n    margin-right: 4px;\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: 4px;\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n  \n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,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 * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\n  }\n\n  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -45,14 +45,14 @@ export const styles = css `
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: 8px;
+		border-radius: var(--nile-radius-radius-xl);
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 
 	.hero__slot__container {
 		height:var(--nile-hero-height);
-		padding-left: 48px;
+		padding-left: var(--nile-spacing-5xl);
 		display: flex;
 		align-items: center;
 		gap:var(--nile-spacing-spacing-xl);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,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 * Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tdisplay:block;\n\t\t--nile-hero-transition-time:2000ms;\n\t}\n\n\t.hero__header--collapsed{\n\t\tposition:absolute;\n\t\ttop:0;\n\t\tleft:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\t\n\t.hero__container {\n\t\toverflow:hidden;\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n  \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__container--collapsed{\n\t\theight: 67px;\n\t\tbackground-color: var(--nile-hero-collapsed-background);\n\t}\n\n\t.hero__container--expanded{\n\t\theight:var(--nile-hero-height);\n\t\tbackground:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__slot__container {\n\t\theight:var(--nile-hero-height);\n\t\tpadding-left: 48px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom:0;\n  \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__slot {\n\t\tdisplay: flex;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t}\n\n\t.hero__img__container {\n\t\theight:var(--nile-hero-height);\n\t\toverflow:hidden;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tbottom:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:var(--nile-hero-height);\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-hero.css.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,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 * Hero CSS\n */\nexport const styles = css`\n\n\t:host {\n\t\tdisplay:block;\n\t\t--nile-hero-transition-time:2000ms;\n\t}\n\n\t.hero__header--collapsed{\n\t\tposition:absolute;\n\t\ttop:0;\n\t\tleft:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\t\n\t.hero__container {\n\t\toverflow:hidden;\n\t\twidth:100%;\n\t\tposition:relative;\n\t\tdisplay:block;\n  \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__container--collapsed{\n\t\theight: 67px;\n\t\tbackground-color: var(--nile-hero-collapsed-background);\n\t}\n\n\t.hero__container--expanded{\n\t\theight:var(--nile-hero-height);\n\t\tbackground:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: var(--nile-radius-radius-xl);\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__slot__container {\n\t\theight:var(--nile-hero-height);\n\t\tpadding-left: var(--nile-spacing-5xl);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom:0;\n  \t\ttransition: var(--nile-hero-transition-time);\n\t}\n\n\t.hero__slot {\n\t\tdisplay: flex;\n\t\tgap:var(--nile-spacing-spacing-xl);\n\t}\n\n\t.hero__img__container {\n\t\theight:var(--nile-hero-height);\n\t\toverflow:hidden;\n\t\twidth:max-content;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tbottom:0;\n\t\ttransition:var(--nile-hero-transition-time);\n\t}\n\n\t.hero__img {\n\t\tobject-fit:cover;\n\t\theight:var(--nile-hero-height);\n\t\twidth:auto;\n\t}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-hero-header/nile-hero-header.css.js

@@ -14,8 +14,8 @@ export const styles = css `
 		width:100%;
 		display: flex;
 		align-items: center;
-		padding:16px 48px;
-		gap: 16px;
+		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
+		gap: var(--nile-spacing-xl);
 		border-bottom: 1px solid rgb(234, 236, 240);
 	}
 
@@ -24,7 +24,7 @@ export const styles = css `
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: 8px;
+		border-radius: var(--nile-radius-radius-xl);
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}

package/dist/src/nile-hero-header/nile-hero-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-hero-header.css.js","sourceRoot":"","sources":["../../../src/nile-hero-header/nile-hero-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * HeroHeader CSS\n */\nexport const styles = css`\n\t\n\t:host {\n\t\twidth:100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding:16px 48px;\n\t\tgap: 16px;\n\t\tborder-bottom: 1px solid rgb(234, 236, 240);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: 8px;\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__text {\n\t\tcolor: var(--nile-hero-text-color);\n\t\tfont-size: var(--nile-hero-text-font-size);\n\t\tline-height: var(--nile-hero-text-line-height);\n\t\tfont-style: normal;\n\t\tfont-weight: var(--nile-hero-text-font-weight);\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-hero-header.css.js","sourceRoot":"","sources":["../../../src/nile-hero-header/nile-hero-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * HeroHeader CSS\n */\nexport const styles = css`\n\t\n\t:host {\n\t\twidth:100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding:var(--nile-spacing-xl) var(--nile-spacing-5xl);\n\t\tgap: var(--nile-spacing-xl);\n\t\tborder-bottom: 1px solid rgb(234, 236, 240);\n\t}\n\n\t.icon__container {\n\t\theight: 32px;\n\t\taspect-ratio: 1 / 1;\n\t\tplace-items: center;\n\t\tdisplay: grid;\n\t\tborder-radius: var(--nile-radius-radius-xl);\n\t\tborder: 1px solid var(--nile-colors-neutral-400);\n\t\tbackground: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);\n\t}\n\n\t.hero__text {\n\t\tcolor: var(--nile-hero-text-color);\n\t\tfont-size: var(--nile-hero-text-font-size);\n\t\tline-height: var(--nile-hero-text-line-height);\n\t\tfont-style: normal;\n\t\tfont-weight: var(--nile-hero-text-font-weight);\n\t}\n`;\n\nexport default [styles];\n"]}