@aquera/nile-elements 0.1.39-beta-1.2 → 0.1.40-beta-1.1

package/dist/nile-radio/nile-radio.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-radio.css.cjs.js","sources":["../../../src/nile-radio/nile-radio.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Radio 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  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    vertical-align: middle;\n    cursor: pointer;\n    margin: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n    align-items: center;\n  }\n\n  .radio--medium {\n    --toggle-size: 14px;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n  }\n\n  .radio__checked-icon {\n    display: var(--nile-display-inline-flex, var(--ng-display-block));\n    width: var(--nile-radio-inner-width, var(--ng-width-2));\n    height: var(--nile-radio-inner-width, var(--ng-height-8px));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-radio-outer-width, var(--ng-width-4));\n    height: var(--nile-radio-outer-height, var(--ng-height-16px));\n    border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n    color: transparent;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-white));\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n    border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n    background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid)); \n  }\n\n  /* Checked + hover */\n  .radio__checked-icon:hover {\n    background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n    outline-offset: 1px;\n  }\n\n  .radio__control:focus-visible {\n    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n    outline-offset: 2px;\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .radio--disabled .radio__checked-icon {\n    background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n  }\n\n  .radio--disabled .radio__control {\n    background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    user-select: none;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n  }\n  .radio__label_border {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n    border: 1px solid var(--Neutral-Normal, var(--nile-colors-neutral-400, var(--ng-colors-border-secondary)));\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-radio.css.cjs.js","sources":["../../../src/nile-radio/nile-radio.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Radio 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  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    vertical-align: middle;\n    cursor: pointer;\n    margin: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n    align-items: center;\n  }\n\n  .radio--medium {\n    --toggle-size: 14px;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n  }\n\n  .radio__checked-icon {\n    display: var(--nile-display-inline-flex, var(--ng-display-block));\n    width: var(--nile-radio-inner-width, var(--ng-width-2));\n    height: var(--nile-radio-inner-width, var(--ng-height-8px));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-radio-outer-width, var(--ng-width-4));\n    height: var(--nile-radio-outer-height, var(--ng-height-16px));\n    border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n    color: transparent;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n    border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n    background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n  }\n\n  /* Checked + hover */\n  .radio__checked-icon:hover {\n    background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n    outline-offset: 1px;\n  }\n\n  .radio__control:focus-visible {\n    outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n    outline-offset: 2px;\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .radio--disabled .radio__checked-icon {\n    background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n  }\n\n  .radio--disabled .radio__control {\n    background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    user-select: none;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n  }\n  .radio__label_border {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-radio/nile-radio.css.esm.js

@@ -12,7 +12,6 @@ import{css as r}from"lit";const o=r`
 
   .radio {
     display: inline-flex;
-    align-items: top;
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
@@ -64,7 +63,7 @@ import{css as r}from"lit";const o=r`
   /* Hover */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
     border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));
-    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-white));
+    background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));
   }
 
   /* Checked */
@@ -77,7 +76,7 @@ import{css as r}from"lit";const o=r`
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
     border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));
-    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid)); 
+    background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));
   }
 
   /* Checked + hover */
@@ -128,6 +127,6 @@ import{css as r}from"lit";const o=r`
   .radio__label_border {
     padding: var(--nile-spacing-lg, var(--ng-spacing-xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
-    border: 1px solid var(--Neutral-Normal, var(--nile-colors-neutral-400, var(--ng-colors-border-secondary)));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;export{o as s};

package/dist/nile-section-message/nile-section-message.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-spacing-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success);\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning);\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error);\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '\u2022';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '\u2022';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-section-message.css.cjs.js.map

package/dist/nile-section-message/nile-section-message.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-section-message.css.cjs.js","sources":["../../../src/nile-section-message/nile-section-message.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * SectionMessage CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-spacing-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success);\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning);\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error);\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '•';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-section-message.css.cjs.js","sources":["../../../src/nile-section-message/nile-section-message.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * SectionMessage CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\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  .parent__wrapper {\n    width: auto;\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-xl));\n    box-sizing: border-box;\n    padding: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    word-wrap: break-word;\n    align-items: center;\n    border: var(--nile-border-width-0, var(--ng-border-width-1)) solid var(--nile-section-message-background-color-primary, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-spacing-xs, var(--ng-radius-xl));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .section--primary {\n    background-color: var(--nile-section-message-background-color-primary, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--success {\n    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--warning {\n    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .section--error {\n    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .left__wrapper {\n    align-self: start;\n    height: auto;\n  }\n\n  nile-icon-button::part(base) {\n    background-color: var(--icon-button-background-color, var(--ng-colors-bg-primary-alt));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .icon--primary {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-primary,\n    var(--ng-colors-bg-primary-alt));\n  }\n\n  .icon--success {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-success\n    );\n  }\n\n  .icon--warning {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-warning\n    );\n  }\n\n  .icon--error {\n    --icon-button-background-color: var(\n      --nile-section-message-icon-background-color-error\n    );\n  }\n\n  .right__wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 100%;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: 140%;\n    letter-spacing: 0.2px;\n  }\n\n  .section__heading {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n  }\n\n  .section__description {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color: var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));\n  }\n\n  .footer__actions {\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-none));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    cursor: pointer;\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child)) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-600));\n  }\n\n  ::slotted([slot='footer__actions']:not(:last-child))::after {\n    content: '•';\n    color: var(--nile-section-message-footer-color, var(--ng-componentcolors-alpha-white-100));\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-section-message/nile-section-message.css.esm.js

@@ -4,7 +4,7 @@ import{css as o}from"lit";const r=o`
     width: 100%;
     box-sizing: border-box;
     --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
-    min-width: var(--nile-width-width-xxs, var(--ng-spacing-80));
+    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     -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));
@@ -28,15 +28,15 @@ import{css as o}from"lit";const r=o`
   }
 
   .section--success {
-    background-color: var(--nile-section-message-background-color-success);
+    background-color: var(--nile-section-message-background-color-success, var(--ng-colors-bg-primary-alt));
   }
 
   .section--warning {
-    background-color: var(--nile-section-message-background-color-warning);
+    background-color: var(--nile-section-message-background-color-warning, var(--ng-colors-bg-primary-alt));
   }
 
   .section--error {
-    background-color: var(--nile-section-message-background-color-error);
+    background-color: var(--nile-section-message-background-color-error, var(--ng-colors-bg-primary-alt));
   }
 
   .left__wrapper {

package/dist/nile-select/nile-select.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-nxt-gen-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-lg);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-md);\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm);\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl);\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, --ng-nxt-gen-outline-transparent);\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500j, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--nile-width-auto, var(--ng-width-auto));\n    max-height: var(--nile-height-247px, var(--ng-spacing-64));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-box-shadow)) ;\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold);\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl);\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg);\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl);\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-lg);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-md);\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm);\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl);\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--nile-width-auto, var(--ng-width-auto));\n    max-height: var(--nile-height-247px, var(--ng-spacing-64));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold);\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl);\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg);\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl);\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-select.css.cjs.js.map

package/dist/nile-select/nile-select.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-select.css.cjs.js","sources":["../../../src/nile-select/nile-select.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-nxt-gen-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-lg);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-md);\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm);\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl);\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, --ng-nxt-gen-outline-transparent);\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500j, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--nile-width-auto, var(--ng-width-auto));\n    max-height: var(--nile-height-247px, var(--ng-spacing-64));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-box-shadow)) ;\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold);\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl);\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg);\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl);\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-select.css.cjs.js","sources":["../../../src/nile-select/nile-select.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    margin-top: var(--nile-spacing-lg);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-md);\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm);\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl);\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600);\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--nile-width-auto, var(--ng-width-auto));\n    max-height: var(--nile-height-247px, var(--ng-spacing-64));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold);\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl);\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg);\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl);\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-select/nile-select.css.esm.js

@@ -3,8 +3,8 @@ import{css as e}from"lit";const o=e`
     box-sizing: border-box;
     --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
     --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
-    --ng-nxt-gen-outline-transparent: var(--ng-border-width-1) solid transparent;
-    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04));
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));
     -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));
@@ -202,7 +202,7 @@ import{css as e}from"lit";const o=e`
   .select--standard .select__combobox {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
-    outline: var(--nile-outline-none, --ng-nxt-gen-outline-transparent);
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
   .select--standard .select__combobox:hover {
@@ -213,13 +213,13 @@ import{css as e}from"lit";const o=e`
 
   .select--error:hover:not(.select--disabled)  .select__combobox{
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-error));
+    outline: var(--nile-outline-none, var(--ng-colors-border-error));
   }
 
   .select--standard.select--disabled .select__combobox {
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );
-    color: var(--nile-colors-dark-500j, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
     opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
     outline: none;
@@ -236,7 +236,7 @@ import{css as e}from"lit";const o=e`
 
   .select--error .select__combobox {
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline-transparent));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
 
@@ -287,13 +287,12 @@ import{css as e}from"lit";const o=e`
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
     margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
     .select__combobox {
-    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-0));
+    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .select--medium .select__tags {
@@ -372,7 +371,7 @@ import{css as e}from"lit";const o=e`
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--nile-width-auto, var(--ng-width-auto));
     max-height: var(--nile-height-247px, var(--ng-spacing-64));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-box-shadow)) ;
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
 
   .select__options__search-enabled {

package/dist/nile-sidebar/index.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var o,i,r,e,n,t,a,_templateObject,_templateObject2,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){o=_tslib.__decorate;},function(_lit){i=_lit.css;r=_lit.LitElement;e=_lit.html;},function(_litDecoratorsJs){n=_litDecoratorsJs.property;t=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;}],execute:function execute(){s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.title="",_this.showSidebar=!1;return _this;}_inherits(s,_r);return _createClass(s,[{key:"buttonClassMap",get:function get(){return{"nds-menu--active":this.showSidebar};}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-menu--wrapper  ","\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>          \n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    "])),a(this.buttonClassMap));}}]);}(r);s.styles=i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);      \n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\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    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: var(--nile-spacing-2xl);\n      display: block;\n      margin-bottom: var(--nile-spacing-lg);\n    }\n\n    .menu-group {\n      margin-left: var(--nile-spacing-2xl);\n      margin-right: var(--nile-spacing-2xl);\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: var(--nile-radius-sm);\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n      margin-top: var(--nile-spacing-lg) !important;\n      margin-bottom: var(--nile-spacing-lg) !important;\n      background-color: rrgba(0, 0, 0, 0.1);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  "]))),o([n()],s.prototype,"title",void 0),o([n()],s.prototype,"showSidebar",void 0),s=o([t("nile-sidebar")],s);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js"],function(_export,_context){"use strict";var o,i,r,e,n,t,a,_templateObject,_templateObject2,s;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){o=_tslib.__decorate;},function(_lit){i=_lit.css;r=_lit.LitElement;e=_lit.html;},function(_litDecoratorsJs){n=_litDecoratorsJs.property;t=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;}],execute:function execute(){s=/*#__PURE__*/function(_r){function s(){var _this;_classCallCheck(this,s);_this=_callSuper(this,s,arguments),_this.title="",_this.showSidebar=!1;return _this;}_inherits(s,_r);return _createClass(s,[{key:"buttonClassMap",get:function get(){return{"nds-menu--active":this.showSidebar};}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"nile-menu--wrapper  ","\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>\n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    "])),a(this.buttonClassMap));}}]);}(r);s.styles=i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);\n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\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    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: var(--nile-spacing-2xl);\n      display: block;\n      margin-bottom: var(--nile-spacing-lg);\n    }\n\n    .menu-group {\n      margin-left: var(--nile-spacing-2xl);\n      margin-right: var(--nile-spacing-2xl);\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: var(--nile-radius-sm);\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px var(--nile-colors-dark-100);\n      margin-top: var(--nile-spacing-lg) !important;\n      margin-bottom: var(--nile-spacing-lg) !important;\n      background-color: var(--nile-colors-dark-100);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  "]))),o([n()],s.prototype,"title",void 0),o([n()],s.prototype,"showSidebar",void 0),s=o([t("nile-sidebar")],s);}};});
 //# sourceMappingURL=index.cjs.js.map

package/dist/nile-sidebar/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/nile-sidebar/index.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * An nile-menu element.\n */\n\ninterface MenuItem {\n  name: string;\n  icon: string;\n  href: string;\n}\n\ninterface MenuItemList {\n  [key: string]: MenuItem;\n}\n\n/**\n * An nile-sidebar element.\n *\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-sidebar')\nexport class NileSidebar extends LitElement {\n  static override styles = css`\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);      \n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\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    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: var(--nile-spacing-2xl);\n      display: block;\n      margin-bottom: var(--nile-spacing-lg);\n    }\n\n    .menu-group {\n      margin-left: var(--nile-spacing-2xl);\n      margin-right: var(--nile-spacing-2xl);\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: var(--nile-radius-sm);\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n      margin-top: var(--nile-spacing-lg) !important;\n      margin-bottom: var(--nile-spacing-lg) !important;\n      background-color: rrgba(0, 0, 0, 0.1);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  `;\n\n  /**\n   * Button Lab\n   */\n  @property()\n  title = '';\n\n  /**\n   * Hide Sidebar\n   */\n  @property()\n  showSidebar = false;\n\n  get buttonClassMap() {\n    return {\n      'nds-menu--active': this.showSidebar\n    };\n  }\n\n  // class=\"nds-menu ${classMap(this.buttonClassMap)}\"\n  \n  override render() {\n    return html`\n      <div class=\"nile-menu--wrapper  ${classMap(this.buttonClassMap)}\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>          \n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar': NileSidebar;\n  }\n}\n"],"names":["NileSidebar","_r","s","this","title","showSidebar","_this","_inherits","_createClass","key","get","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","buttonClassMap","LitElement","styles","css","_templateObject2","__decorate","property","prototype","customElement"],"mappings":"6kGA0BaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,uEA2DLC,KAAAA,CAAKC,KAAAA,CAAG,GAMRD,KAAAA,CAAWE,WAAAA,CAAAA,CAAG,CAmCf,QAAAC,KAAA,EAjCCC,SAAA,CAAAL,CAAA,CAAAD,EAAA,SAAAO,YAAA,CAAAN,CAAA,GAAAO,GAAA,kBAAAC,GAAA,UAAAA,IAAA,CACE,CAAA,MAAO,CACL,kBAAA,CAAoBP,KAAKE,WAE5B,CAAA,EAIQ,GAAAI,GAAA,UAAAE,KAAA,UAAAC,MAAAA,CAAAA,CAAAA,CACP,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,4qBACyBC,CAAAA,CAASb,IAAKc,CAAAA,cAAAA,CAAAA,EAsBnD,CAlGejB,MADekB,CAA1B,EACWlB,CAAAA,CAAMmB,OAAGC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAN,sBAAA,wkDA0D5BO,CAAAA,CAAAA,CAAA,CADCC,CACUvB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwB,SAAA,CAAA,OAAA,CAAA,IAAA,IAMXF,CAAA,CAAA,CADCC,CACmBvB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwB,UAAA,aAAA,CAAA,IAAA,EAAA,CAAA,CAjETxB,EAAWsB,CAAA,CAAA,CADvBG,EAAc,cACFzB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/nile-sidebar/index.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * An nile-menu element.\n */\n\ninterface MenuItem {\n  name: string;\n  icon: string;\n  href: string;\n}\n\ninterface MenuItemList {\n  [key: string]: MenuItem;\n}\n\n/**\n * An nile-sidebar element.\n *\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-sidebar')\nexport class NileSidebar extends LitElement {\n  static override styles = css`\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);\n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\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    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: var(--nile-spacing-2xl);\n      display: block;\n      margin-bottom: var(--nile-spacing-lg);\n    }\n\n    .menu-group {\n      margin-left: var(--nile-spacing-2xl);\n      margin-right: var(--nile-spacing-2xl);\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: var(--nile-radius-sm);\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px var(--nile-colors-dark-100);\n      margin-top: var(--nile-spacing-lg) !important;\n      margin-bottom: var(--nile-spacing-lg) !important;\n      background-color: var(--nile-colors-dark-100);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  `;\n\n  /**\n   * Button Lab\n   */\n  @property()\n  title = '';\n\n  /**\n   * Hide Sidebar\n   */\n  @property()\n  showSidebar = false;\n\n  get buttonClassMap() {\n    return {\n      'nds-menu--active': this.showSidebar\n    };\n  }\n\n  // class=\"nds-menu ${classMap(this.buttonClassMap)}\"\n\n  override render() {\n    return html`\n      <div class=\"nile-menu--wrapper  ${classMap(this.buttonClassMap)}\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>\n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar': NileSidebar;\n  }\n}\n"],"names":["NileSidebar","_r","s","this","title","showSidebar","_this","_inherits","_createClass","key","get","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","buttonClassMap","LitElement","styles","css","_templateObject2","__decorate","property","prototype","customElement"],"mappings":"6kGA0BaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,uEA2DLC,KAAAA,CAAKC,KAAAA,CAAG,GAMRD,KAAAA,CAAWE,WAAAA,CAAAA,CAAG,CAmCf,QAAAC,KAAA,EAjCCC,SAAA,CAAAL,CAAA,CAAAD,EAAA,SAAAO,YAAA,CAAAN,CAAA,GAAAO,GAAA,kBAAAC,GAAA,UAAAA,IAAA,CACE,CAAA,MAAO,CACL,kBAAA,CAAoBP,KAAKE,WAE5B,CAAA,EAIQ,GAAAI,GAAA,UAAAE,KAAA,UAAAC,MAAAA,CAAAA,CAAAA,CACP,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,kqBACyBC,CAAAA,CAASb,IAAKc,CAAAA,cAAAA,CAAAA,EAsBnD,CAlGejB,MADekB,CAA1B,EACWlB,CAAAA,CAAMmB,OAAGC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAN,sBAAA,mlDA0D5BO,CAAAA,CAAAA,CAAA,CADCC,CACUvB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwB,SAAA,CAAA,OAAA,CAAA,IAAA,IAMXF,CAAA,CAAA,CADCC,CACmBvB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwB,UAAA,aAAA,CAAA,IAAA,EAAA,CAAA,CAjETxB,EAAWsB,CAAA,CAAA,CADvBG,EAAc,cACFzB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/nile-sidebar/index.esm.js

@@ -9,7 +9,7 @@ import{__decorate as o}from"tslib";import{css as i,LitElement as r,html as e}fro
               height="31.06px"
               tabindex="1"
             />
-          </a>          
+          </a>
           <div class="menu-group">
             <slot name="menu"></slot>
           </div>
@@ -23,7 +23,7 @@ import{__decorate as o}from"tslib";import{css as i,LitElement as r,html as e}fro
     `}};s.styles=i`
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);      
+      border-right: 1px solid var(--nile-colors-neutral-400);
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
@@ -58,10 +58,10 @@ import{__decorate as o}from"tslib";import{css as i,LitElement as r,html as e}fro
     }
 
     .nile-menu__hr {
-      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      border-bottom: solid 1px var(--nile-colors-dark-100);
       margin-top: var(--nile-spacing-lg) !important;
       margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: rrgba(0, 0, 0, 0.1);
+      background-color: var(--nile-colors-dark-100);
     }
 
     .nds-menu--bottom {

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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-line-height-small, var(--ng-height-20px));\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-2));\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-0-5));\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-500));\n    line-height: var(--nile-line-height-small, 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-400));\n    line-height: var(--nile-line-height-small, 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-tertiary));\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, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));\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(--focus-shadow-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-tertiary));\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-tertiary));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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-line-height-small, 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-500));\n    line-height: var(--nile-line-height-small, 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-400));\n    line-height: var(--nile-line-height-small, 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-tertiary));\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: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"]))));}};});
 //# sourceMappingURL=nile-slide-toggle.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-slide-toggle.css.cjs.js","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"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-line-height-small, var(--ng-height-20px));\n  }\n\n  .nile-slide-toggle__switch--left{\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-2));\n  }\n\n  .nile-slide-toggle__switch--right{\n    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));\n  }\n\n  .nile-slide-toggle__label {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-0-5));\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-500));\n    line-height: var(--nile-line-height-small, 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-400));\n    line-height: var(--nile-line-height-small, 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-tertiary));\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, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));\n  }\n\n  .nile-slide-toggle__slider:focus {\n    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));\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(--focus-shadow-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-tertiary));\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-tertiary));\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEeA,CAAAA,CAAAC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-slide-toggle.css.cjs.js","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"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-line-height-small, 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-500));\n    line-height: var(--nile-line-height-small, 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-400));\n    line-height: var(--nile-line-height-small, 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-tertiary));\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: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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEeA,CAAAA,CAAAC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -29,17 +29,17 @@ import{css as e}from"lit";var i=e`
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-2));
+    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));
+    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-0-5));
+    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     letter-spacing: 0.2px;
     font-style: normal;
@@ -83,11 +83,11 @@ import{css as e}from"lit";var i=e`
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));
+    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, 0px 0px 0px 2px var(--ng-colors-bg-primary, var(--ng-colors-bg-primary)), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring, var(--ng-colors-effects-focus-ring)));
+    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__slider:before {
@@ -110,7 +110,7 @@ import{css as e}from"lit";var i=e`
   .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(--focus-shadow-ring));
+    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -126,7 +126,7 @@ import{css as e}from"lit";var i=e`
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -138,6 +138,6 @@ import{css as e}from"lit";var i=e`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
   }
 `;export{i as s};

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",o=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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-100 var(--ng-componentcolors-utility-gray-50));\n    color: var(--nile-colors-dark-900,var(--ng-color-graytrue-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-color-blue-500));\n    color: var(--nile-colors-white-base, var(--ng-color-base-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"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",o=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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"]))));}};});
 //# sourceMappingURL=nile-split-panel.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-split-panel.css.cjs.js","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * 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-100 var(--ng-componentcolors-utility-gray-50));\n    color: var(--nile-colors-dark-900,var(--ng-color-graytrue-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-color-blue-500));\n    color: var(--nile-colors-white-base, var(--ng-color-base-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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-split-panel.css.cjs.js","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * 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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}