@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.js

@@ -11,29 +11,26 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     --min-width: 280px;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile__sidebar-menu-item {
     display: flex;
     align-items: center;
-    padding: var(--nile-spacing-md);
-    gap: var(--nile-spacing-xl);
+    padding: 12px;
+    gap: 15px;
     min-width: var(--min-width);
     width: max-content;
     box-sizing: border-box;
 
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
     line-height: var(--nile-line-height-medium);
   }
 
   .nile__sidebar-menu-item:hover {
     background-color: var(--nile-colors-neutral-100);
-    border-radius: var(--nile-radius-sm);
+    border-radius: 6px;
   }
 
   .hide-sidebar-menu-items{

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-menu-items.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,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 * SidebarMenuItems CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 280px;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile__sidebar-menu-item {\n    display: flex;\n    align-items: center;\n    padding: var(--nile-spacing-md);\n    gap: var(--nile-spacing-xl);\n    min-width: var(--min-width);\n    width: max-content;\n    box-sizing: border-box;\n\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-medium);\n    line-height: var(--nile-line-height-medium);\n  }\n\n  .nile__sidebar-menu-item:hover {\n    background-color: var(--nile-colors-neutral-100);\n    border-radius: var(--nile-radius-sm);\n  }\n\n  .hide-sidebar-menu-items{\n    min-width:48px;\n  }\n\n  .hide-items {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-sidebar-menu-items.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,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 * SidebarMenuItems CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 280px;\n  }\n\n  .nile__sidebar-menu-item {\n    display: flex;\n    align-items: center;\n    padding: 12px;\n    gap: 15px;\n    min-width: var(--min-width);\n    width: max-content;\n    box-sizing: border-box;\n\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: 500;\n    line-height: var(--nile-line-height-medium);\n  }\n\n  .nile__sidebar-menu-item:hover {\n    background-color: var(--nile-colors-neutral-100);\n    border-radius: 6px;\n  }\n\n  .hide-sidebar-menu-items{\n    min-width:48px;\n  }\n\n  .hide-items {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.js

@@ -50,7 +50,6 @@ let NileSidebarMenuItems = class NileSidebarMenuItems extends NileElement {
               name="${this.iconValue}"
               aria-label="${this.iconValue}"
               size="24"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>`
             : ``}
         <slot

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-menu-items.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.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,+BAA+B,CAAC;AACvD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QASO,cAAS,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAChB,WAAM,GAAG,KAAK,CAAC;QAElD,cAAS,GAAG,KAAK,CAAC;QAkC3B,gBAAgB;IAClB,CAAC;IA9CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,yBAAyB,EAAE,IAAI;YAC/B,yBAAyB,EAAE,IAAI,CAAC,SAAS;SAC1C,CAAC;;UAEA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;sBACM,IAAI,CAAC,SAAS;4BACR,IAAI,CAAC,SAAS;;;0BAGhB;YAChB,CAAC,CAAC,EAAE;;kBAEI,QAAQ,CAAC;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;;;KAGP,CAAC;IACJ,CAAC;CAGF,CAAA;AAtCa;IAAX,QAAQ,EAAE;uDAAgB;AACiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAgB;AAElD;IAAR,KAAK,EAAE;uDAAmB;AAZhB,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA+ChC;;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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-sidebar-menu-items.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile sidebar-menu-items component.\n *\n * @tag nile-sidebar-menu-items\n *\n */\n@customElement('nile-sidebar-menu-items')\nexport class NileSidebarMenuItems extends NileElement {\n  /**\n   * The styles for nile-sidebar-menu-items\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() iconValue = ''; // name of the icon we are using\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @state() collapsed = false;\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      <div\n        class=${classMap({\n          'nile__sidebar-menu-item': true,\n          'hide-sidebar-menu-items': this.collapsed,\n        })}\n      >\n        ${this.iconValue\n          ? html`<nile-icon\n              name=\"${this.iconValue}\"\n              aria-label=\"${this.iconValue}\"\n              size=\"24\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            ></nile-icon>`\n          : ``}\n        <slot\n          class=${classMap({\n            'hide-items': this.collapsed,\n          })}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileSidebarMenuItems;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar-menu-items': NileSidebarMenuItems;\n  }\n}\n"]}
+{"version":3,"file":"nile-sidebar-menu-items.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.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,+BAA+B,CAAC;AACvD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QASO,cAAS,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAChB,WAAM,GAAG,KAAK,CAAC;QAElD,cAAS,GAAG,KAAK,CAAC;QAiC3B,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,yBAAyB,EAAE,IAAI;YAC/B,yBAAyB,EAAE,IAAI,CAAC,SAAS;SAC1C,CAAC;;UAEA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;sBACM,IAAI,CAAC,SAAS;4BACR,IAAI,CAAC,SAAS;;0BAEhB;YAChB,CAAC,CAAC,EAAE;;kBAEI,QAAQ,CAAC;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;;;KAGP,CAAC;IACJ,CAAC;CAGF,CAAA;AArCa;IAAX,QAAQ,EAAE;uDAAgB;AACiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAgB;AAElD;IAAR,KAAK,EAAE;uDAAmB;AAZhB,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA8ChC;;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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-sidebar-menu-items.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile sidebar-menu-items component.\n *\n * @tag nile-sidebar-menu-items\n *\n */\n@customElement('nile-sidebar-menu-items')\nexport class NileSidebarMenuItems extends NileElement {\n  /**\n   * The styles for nile-sidebar-menu-items\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() iconValue = ''; // name of the icon we are using\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @state() collapsed = false;\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      <div\n        class=${classMap({\n          'nile__sidebar-menu-item': true,\n          'hide-sidebar-menu-items': this.collapsed,\n        })}\n      >\n        ${this.iconValue\n          ? html`<nile-icon\n              name=\"${this.iconValue}\"\n              aria-label=\"${this.iconValue}\"\n              size=\"24\"\n            ></nile-icon>`\n          : ``}\n        <slot\n          class=${classMap({\n            'hide-items': this.collapsed,\n          })}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileSidebarMenuItems;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar-menu-items': NileSidebarMenuItems;\n  }\n}\n"]}

package/dist/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.js

@@ -11,9 +11,6 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .wrapper-box {
@@ -34,7 +31,7 @@ export const styles = css `
   .body-content {
     display: flex;
     height: 100%;
-    background-color: var(--nile-colors-red-500);
+    background-color: red;
   }
 
   .sidebar__content--overlay {

package/dist/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-wrapper.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGxB,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 * SidebarWrapper CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .wrapper-box {\n    display: flex;\n    height: 100vh;\n    width: 100%;\n  }\n\n  .wrapper-box--right {\n    flex-direction: row-reverse;\n  }\n\n  .sidebar-content {\n    display: flex;\n    height: 100%;\n  }\n\n  .body-content {\n    display: flex;\n    height: 100%;\n    background-color: var(--nile-colors-red-500);\n  }\n\n  .sidebar__content--overlay {\n    position: absolute;\n    z-index: 1000;\n  }\n\n  .sidebar__content--overlay--right {\n    right: 0;\n  }\n\n  .sidebar__content--overlay--left {\n    left: 0;\n  }\n\n  .body__content--overlay {\n    position: absolute;\n    left: 0;\n    opacity:0.5;\n    background-color:var(--nile-sidebar-wrapper-overlay-background-color);\n  }\n\n  /* For left side  */\n  .sidebar__content--overlay-open-left {\n    animation: slide-in-left 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-left {\n    animation: slide-out-left 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-left {\n    0% {\n      transform: translateX(-100%);\n    }\n\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-left {\n    0% {\n      transform: translateX(0);\n    }\n\n    100% {\n      transform: translateX(-100%);\n    }\n  }\n\n  /* For right side */\n  .sidebar__content--overlay-open-right {\n    animation: slide-in-right 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-right {\n    animation: slide-out-right 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-right {\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-right {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-sidebar-wrapper.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGxB,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 * SidebarWrapper CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .wrapper-box {\n    display: flex;\n    height: 100vh;\n    width: 100%;\n  }\n\n  .wrapper-box--right {\n    flex-direction: row-reverse;\n  }\n\n  .sidebar-content {\n    display: flex;\n    height: 100%;\n  }\n\n  .body-content {\n    display: flex;\n    height: 100%;\n    background-color: red;\n  }\n\n  .sidebar__content--overlay {\n    position: absolute;\n    z-index: 1000;\n  }\n\n  .sidebar__content--overlay--right {\n    right: 0;\n  }\n\n  .sidebar__content--overlay--left {\n    left: 0;\n  }\n\n  .body__content--overlay {\n    position: absolute;\n    left: 0;\n    opacity:0.5;\n    background-color:var(--nile-sidebar-wrapper-overlay-background-color);\n  }\n\n  /* For left side  */\n  .sidebar__content--overlay-open-left {\n    animation: slide-in-left 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-left {\n    animation: slide-out-left 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-left {\n    0% {\n      transform: translateX(-100%);\n    }\n\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-left {\n    0% {\n      transform: translateX(0);\n    }\n\n    100% {\n      transform: translateX(-100%);\n    }\n  }\n\n  /* For right side */\n  .sidebar__content--overlay-open-right {\n    animation: slide-in-right 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-right {\n    animation: slide-out-right 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-right {\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-right {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -4,9 +4,6 @@ export default css `
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-slide-toggle {
@@ -26,43 +23,43 @@ export default css `
     display: inline-block;
     width: 36px;
     height: 20px;
-    line-height: var(--nile-height-22px, var(--ng-height-20px));
+    line-height: 22px;
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-left: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    gap: 2px;
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   .nile-slide-toggle__sublabel {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
   }
 
   .nile-slide--disabled .nile-slide-toggle__label,
   .nile-slide--disabled .nile-slide-toggle__sublabel{
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-slide-toggle__switch input {
@@ -78,23 +75,17 @@ export default css `
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
-    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
+    border-radius: 34px;
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
-  }
-
-  .nile-slide-toggle__slider:hover {
-    &:not(.nile-slide--disabled) {
-      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
-    }
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:before {
@@ -104,20 +95,17 @@ export default css `
     width: 16px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+    border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
-    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
-    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -125,15 +113,15 @@ export default css `
   }
 
   .nile-slide-toggle__slider.round {
-    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
+    border-radius: 20px;
   }
 
   .nile-slide-toggle__slider.round:before {
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -145,7 +133,7 @@ export default css `
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 `;
 //# sourceMappingURL=nile-slide-toggle.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host{\n    --slide-toggle-width:auto;\n    display:inline-block;\n    width:var(--slide-toggle-width);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-slide-toggle {\n    display: inline-flex;\n    align-items: baseline;\n    justify-content:space-between;\n    width:100%;\n  }\n\n  .nile-slide-toggle--reverse{\n    flex-direction:row-reverse;\n  }\n\n  .nile-slide-toggle__switch {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-block;\n    width: 36px;\n    height: 20px;\n    line-height: var(--nile-height-22px, var(--ng-height-20px));\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));\n  }\n\n  .nile-slide-toggle__sublabel {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__label,\n  .nile-slide--disabled .nile-slide-toggle__sublabel{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .nile-slide-toggle__switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .nile-slide-toggle__slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));\n    transition: 0.4s;\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));\n  }\n\n  .nile-slide-toggle__slider:active {\n    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__slider:hover {\n    &:not(.nile-slide--disabled) {\n      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));\n    }\n  }\n\n  .nile-slide-toggle__slider:before {\n    position: absolute;\n    content: '';\n    height: 16px;\n    width: 16px;\n    bottom: 2px;\n    left: 2px;\n    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));\n    transition: 0.4s;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);\n    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n    transform: translateX(16px);\n  }\n\n  .nile-slide-toggle__slider.round {\n    border-radius: var(--nile-radius-xl, var(--ng-radius-full));\n  }\n\n  .nile-slide-toggle__slider.round:before {\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__switch {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .nile-slide--disabled\n    .nile-slide-toggle__switch\n    input:checked\n    + .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n  }\n`;\n"]}
+{"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host{\n    --slide-toggle-width:auto;\n    display:inline-block;\n    width:var(--slide-toggle-width);\n  }\n\n  .nile-slide-toggle {\n    display: inline-flex;\n    align-items: baseline;\n    justify-content:space-between;\n    width:100%;\n  }\n\n  .nile-slide-toggle--reverse{\n    flex-direction:row-reverse;\n  }\n\n  .nile-slide-toggle__switch {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-block;\n    width: 36px;\n    height: 20px;\n    line-height: 22px;\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: 8px;\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: 8px;\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    font-family: var(--nile-font-family-serif);\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-dark-900);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .nile-slide-toggle__sublabel {\n    font-family: var(--nile-font-family-serif);\n    letter-spacing: 0.2px;\n    font-style: normal;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__label,\n  .nile-slide--disabled .nile-slide-toggle__sublabel{\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-slide-toggle__switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .nile-slide-toggle__slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nile-slide-toggle-color-background-inactive);\n    transition: 0.4s;\n    border-radius: 34px;\n  }\n\n  .nile-slide-toggle__slider:active {\n    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n  }\n\n  .nile-slide-toggle__slider:before {\n    position: absolute;\n    content: '';\n    height: 16px;\n    width: 16px;\n    bottom: 2px;\n    left: 2px;\n    background-color: var(--nile-slide-toggle-color-indicator);\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n    background-color: var(--nile-slide-toggle-color-background-active);\n  }\n\n  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n  }\n\n  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n    transform: translateX(16px);\n  }\n\n  .nile-slide-toggle__slider.round {\n    border-radius: 20px;\n  }\n\n  .nile-slide-toggle__slider.round:before {\n    border-radius: 50%;\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200);\n  }\n\n  .nile-slide--disabled .nile-slide-toggle__switch {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .nile-slide--disabled\n    .nile-slide-toggle__switch\n    input:checked\n    + .nile-slide-toggle__slider {\n    background-color: var(--nile-colors-dark-200);\n  }\n`;\n"]}

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

@@ -14,9 +14,6 @@ export const styles = css `
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 
     display: inline-flex;
     width: 1em;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-spinner.css.js","sourceRoot":"","sources":["../../../src/nile-spinner/nile-spinner.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,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 * Spinner CSS\n */\nexport const styles = css`\n:host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--nile-colors-white-base);\n    --speed: 2s;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-spinner.css.js","sourceRoot":"","sources":["../../../src/nile-spinner/nile-spinner.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,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 * Spinner CSS\n */\nexport const styles = css`\n:host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--nile-colors-white-base);\n    --speed: 2s;\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-split-panel/nile-split-panel.css.js

@@ -27,9 +27,6 @@ export const styles = css `
     --max: 100%;
 
     display: grid;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .start,
@@ -43,8 +40,8 @@ export const styles = css `
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
     z-index: 1;
   }
 
@@ -53,8 +50,8 @@ export const styles = css `
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
   }
 
   :host([disabled]) .divider {

package/dist/src/nile-split-panel/nile-split-panel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFxB,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 * SplitPanel CSS\n */\nexport const styles = css`\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    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,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 * SplitPanel CSS\n */\nexport const styles = css`\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    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -15,21 +15,18 @@ export const styles = css `
 	:host {
 		display:block;
 		height:100%;
-		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
-		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
-		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,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 * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n\t}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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 * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var(--nile-spacing-spacing-3xl);\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var(--nile-spacing-spacing-3xl);\n\t}\n`;\n\nexport default [styles];"]}

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

@@ -12,41 +12,38 @@ export const styles = css `
 	:host {
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
-		--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));
+		--lines-thickness: 1px;
 		
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
-		min-width: 200px;
-		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+		min-width:var(--nile-stepper-min-width);
 	}
 	
 	.stepper__item {
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin: 0 -1px;
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-md));
-		--stepper-item-title-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-1, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-height-16px, var(--ng-line-height-text-sm) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:12px;
+		--stepper-item-subtitle-size:10.24px;
+		--stepper-item-text-line-height:16px;
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-height-18px, var(--ng-line-height-text-md) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:12px;
+		--stepper-item-text-line-height:18px;
 		--circle-height:22px;
 	}
 
 	.stepper__item--xl {
-		--item-spacing: var( --nile-spacing-lg, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );
-		--stepper-item-text-line-height: var( --nile-height-22px, var(--ng-line-height-text-lg) );
+		--item-spacing: var(--nile-spacing-spacing-lg);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:22px;
 		--circle-height:26px;
 	}
 
@@ -54,12 +51,11 @@ export const styles = css `
 		display:flex;
 		width:100%;
 		align-items:center;
-		gap: var(--nile-spacing-none, var(--ng-spacing-lg));
 	}
 
 	.stepper__line__container {
 		flex-grow:1;
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;
+		padding:0 1px;
 	}
 
 	.stepper__line--hastitle {
@@ -70,16 +66,16 @@ export const styles = css `
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
-		border-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--above{
 		position: relative;
-		margin-right: var( --nile-spacing-md, var(--ng-spacing-md));
+		margin-right: var(--nile-spacing-spacing-md);
 	}
 
 	.stepper__item__content--above .stepper__content__subtitle{
@@ -98,81 +94,71 @@ export const styles = css `
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin:0 -1px;
 	}
 
 	.stepper__item__bulletin{
-		margin-left: var( --nile-spacing-sm, var(--ng-spacing-none));
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-none));
-	}
-	
-	.stepper__item__bulletin--inline{
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));
-	}
-
-	.stepper__item--selected .stepper__item__bulletin{
-		padding: var(--nile-spacing-none, var(--ng-spacing-xxs));
-    	border: var(--nile-spacing-none, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);
-    	border-radius: 50%;
+		margin-left: 6px;
+		margin-right: 6px;
 	}
 
 	.stepper__content__title {
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+		font-family: var(--nile-font-family-medium);
+		font-weight: 400;
 	}
 
 	.stepper__content__title--inline{
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );
+		padding: 0 8px;
+		color:var(--nile-colors-dark-900);
 	}
 
 	.stepper__content__title--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700) );
-		font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+		color:var(--nile-colors-primary-600);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );
+		color:var(--nile-colors-dark-500);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+		font-family: var(--nile-font-family-sans-serif);
+		font-weight: 400;
 	}
 
 	.stepper__content__subtitle--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600) );
+		color:var(--nile-colors-primary-600);
 	}
 
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) ) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-radius: 50%;
+		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary) ) var(--bulletin--dot--seperation), var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) ) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var( --nile-colors-primary-500, var(--ng-colors-border-brand-alt) );
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
 		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
 	}
 
 	.stepper__bulletin--icon {
-		display: grid;
+		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background-color:var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border-radius: 50%;
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 	
 	.stepper__bulletin__icon--active {
-		border: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );
+		border: 1px solid var(--nile-colors-primary-500);
 		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKxB,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width: 200px;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var( --nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-1, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-text-line-height: var( --nile-height-16px, var(--ng-line-height-text-sm) );\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));\n\t\t--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-text-line-height: var( --nile-height-18px, var(--ng-line-height-text-md) );\n\t\t--circle-height:22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var( --nile-spacing-lg, var(--ng-spacing-lg));\n\t\t--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );\n\t\t--stepper-item-text-line-height: var( --nile-height-22px, var(--ng-line-height-text-lg) );\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t\tgap: var(--nile-spacing-none, var(--ng-spacing-lg));\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var( --nile-spacing-md, var(--ng-spacing-md));\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t}\n\t\n\t.stepper__item__bulletin--inline{\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));\n\t}\n\n\t.stepper__item--selected .stepper__item__bulletin{\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-xxs));\n    \tborder: var(--nile-spacing-none, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);\n    \tborder-radius: 50%;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));\n\t\tcolor:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var( --nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700) );\n\t\tfont-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600) );\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: var(--nile-radius-full, var(--ng-radius-full));\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) ) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary) ) var(--bulletin--dot--seperation), var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) ) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var( --nile-colors-primary-500, var(--ng-colors-border-brand-alt) );\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay: grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: var(--nile-radius-full, var(--ng-radius-full));\n\t\tbackground-color:var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJxB,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: 1px;\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:12px;\n\t\t--stepper-item-subtitle-size:10.24px;\n\t\t--stepper-item-text-line-height:16px;\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:12px;\n\t\t--stepper-item-text-line-height:18px;\n\t\t--circle-height:22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:22px;\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var(--nile-spacing-spacing-md);\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: 6px;\n\t\tmargin-right: 6px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-dark-900);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500);\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: 1px solid var(--nile-colors-primary-500);\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n`;\nexport default [styles];"]}