@aquera/nile-elements 0.0.3-2 → 0.0.3-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js +14 -8
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js.map +1 -1
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js +0 -2
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js +7 -8
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  8. package/dist/index.iife.js +21 -18
  9. package/dist/nile-input/nile-input.css.cjs.js +1 -1
  10. package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
  11. package/dist/nile-input/nile-input.css.esm.js +14 -8
  12. package/dist/nile-select/nile-select.css.cjs.js +1 -1
  13. package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
  14. package/dist/nile-select/nile-select.css.esm.js +0 -2
  15. package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
  16. package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
  17. package/dist/nile-textarea/nile-textarea.css.esm.js +7 -8
  18. package/dist/src/nile-input/nile-input.css.js +14 -8
  19. package/dist/src/nile-input/nile-input.css.js.map +1 -1
  20. package/dist/src/nile-select/nile-select.css.js +0 -2
  21. package/dist/src/nile-select/nile-select.css.js.map +1 -1
  22. package/dist/src/nile-textarea/nile-textarea.css.js +7 -8
  23. package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +1 -1
  26. package/src/nile-input/nile-input.css.ts +14 -8
  27. package/src/nile-select/nile-select.css.ts +0 -2
  28. package/src/nile-textarea/nile-textarea.css.ts +7 -8
package/dist/index.iife.js CHANGED
@@ -588,7 +588,7 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
588
588
  :host([required]) .form-control--has-label .form-control__label::after {
589
589
  content: '*';
590
590
  margin-inline-start: -2px;
591
- color: undefined;
591
+ color: #A4121C;
592
592
  }
593
593
 
594
594
  /* Help text */
@@ -625,16 +625,19 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
625
625
  justify-content: start;
626
626
  position: relative;
627
627
  width: 100%;
628
- font-family: inherit;
629
628
  font-weight: 400;
630
- letter-spacing: normal;
631
629
  vertical-align: middle;
632
630
  overflow: hidden;
633
631
  cursor: text;
634
632
  transition: 150ms color, 150ms border, 150ms box-shadow,
635
633
  150ms background-color;
636
634
  box-sizing: border-box;
637
- }
635
+ color: var(--nile-colors-dark-900);
636
+ font-family: Colfax-regular;
637
+ font-size: 14px;
638
+ font-style: normal;
639
+ line-height: 14px;
640
+ letter-spacing: 0.2px; }
638
641
 
639
642
  /* Standard inputs */
640
643
  .input--standard {
@@ -708,12 +711,8 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
708
711
 
709
712
  .input__control {
710
713
  flex: 1 1 auto;
711
- font-family: inherit;
712
- font-size: inherit;
713
- font-weight: inherit;
714
714
  min-width: 0;
715
715
  height: 100%;
716
- color: hsl(240 5.3% 26.1%);
717
716
  border: none;
718
717
  background: none;
719
718
  box-shadow: none;
@@ -721,6 +720,13 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
721
720
  margin: 0;
722
721
  cursor: inherit;
723
722
  -webkit-appearance: none;
723
+ color: var(--nile-colors-dark-900);
724
+ font-family: Colfax-regular;
725
+ font-size: 14px;
726
+ font-style: normal;
727
+ font-weight: 400;
728
+ line-height: 14px;
729
+ letter-spacing: 0.2px;
724
730
  }
725
731
 
726
732
  .input__control::-webkit-search-decoration,
@@ -2470,8 +2476,6 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
2470
2476
  }
2471
2477
 
2472
2478
  .select__options {
2473
- padding: 5px;
2474
- margin: 4px;
2475
2479
  font-size: 14px;
2476
2480
  color: rgb(133, 129, 129);
2477
2481
  }
@@ -3518,7 +3522,7 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
3518
3522
  :host([required]) .form-control--has-label .form-control__label::after {
3519
3523
  content: '*';
3520
3524
  margin-inline-start: -2px;
3521
- color: red;
3525
+ color: #A4121C;
3522
3526
  }
3523
3527
 
3524
3528
  /* Help text */
@@ -3554,9 +3558,6 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
3554
3558
  align-items: center;
3555
3559
  position: relative;
3556
3560
  width: 100%;
3557
- font-family: Arial, sans-serif;
3558
- font-weight: 400;
3559
- line-height: 1.5;
3560
3561
  letter-spacing: 0.5px;
3561
3562
  vertical-align: middle;
3562
3563
  border-radius: var(--nile-radius-base-standard);
@@ -3624,10 +3625,12 @@ const gN=Symbol.for(""),uN=M=>{if((null==M?void 0:M.r)===gN)return null==M?void
3624
3625
  /* Textarea control styles */
3625
3626
  .textarea__control {
3626
3627
  flex: 1 1 auto;
3627
- font-family: inherit;
3628
- font-size: inherit;
3629
- font-weight: inherit;
3630
- line-height: 1.4;
3628
+ font-family: Colfax-regular;
3629
+ font-size: 14px;
3630
+ font-style: normal;
3631
+ font-weight: 400;
3632
+ line-height: 14px; /* 100% */
3633
+ letter-spacing: 0.2px;
3631
3634
  color: var(--nile-colors-dark-900);
3632
3635
  border: none;
3633
3636
  background: none;
package/dist/nile-input/nile-input.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: undefined;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: inherit;\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: hsl(240 5.3% 26.1%);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n"]))));}};});
1
+ System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px; }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-input.css.cjs.js.map
package/dist/nile-input/nile-input.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.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-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: undefined;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: inherit;\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: hsl(240 5.3% 26.1%);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
1
+ {"version":3,"file":"nile-input.css.cjs.js","sources":["../../../src/nile-input/nile-input.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-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px; }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
package/dist/nile-input/nile-input.css.esm.js CHANGED
@@ -32,7 +32,7 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
32
32
  :host([required]) .form-control--has-label .form-control__label::after {
33
33
  content: '*';
34
34
  margin-inline-start: -2px;
35
- color: undefined;
35
+ color: #A4121C;
36
36
  }
37
37
 
38
38
  /* Help text */
@@ -69,16 +69,19 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
69
69
  justify-content: start;
70
70
  position: relative;
71
71
  width: 100%;
72
- font-family: inherit;
73
72
  font-weight: 400;
74
- letter-spacing: normal;
75
73
  vertical-align: middle;
76
74
  overflow: hidden;
77
75
  cursor: text;
78
76
  transition: 150ms color, 150ms border, 150ms box-shadow,
79
77
  150ms background-color;
80
78
  box-sizing: border-box;
81
- }
79
+ color: var(--nile-colors-dark-900);
80
+ font-family: Colfax-regular;
81
+ font-size: 14px;
82
+ font-style: normal;
83
+ line-height: 14px;
84
+ letter-spacing: 0.2px; }
82
85
 
83
86
  /* Standard inputs */
84
87
  .input--standard {
@@ -152,12 +155,8 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
152
155
 
153
156
  .input__control {
154
157
  flex: 1 1 auto;
155
- font-family: inherit;
156
- font-size: inherit;
157
- font-weight: inherit;
158
158
  min-width: 0;
159
159
  height: 100%;
160
- color: hsl(240 5.3% 26.1%);
161
160
  border: none;
162
161
  background: none;
163
162
  box-shadow: none;
@@ -165,6 +164,13 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
165
164
  margin: 0;
166
165
  cursor: inherit;
167
166
  -webkit-appearance: none;
167
+ color: var(--nile-colors-dark-900);
168
+ font-family: Colfax-regular;
169
+ font-size: 14px;
170
+ font-style: normal;
171
+ font-weight: 400;
172
+ line-height: 14px;
173
+ letter-spacing: 0.2px;
168
174
  }
169
175
 
170
176
  .input__control::-webkit-search-decoration,
package/dist/nile-select/nile-select.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n padding: 5px;\n margin: 4px;\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n"]))));}};});
1
+ System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-select.css.cjs.js.map
package/dist/nile-select/nile-select.css.cjs.js.map CHANGED
@@ -1 +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-element';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n padding: 5px;\n margin: 4px;\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
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-element';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
package/dist/nile-select/nile-select.css.esm.js CHANGED
@@ -334,8 +334,6 @@ import{i as e}from"../index-f1b94546.esm.js";const o=e`
334
334
  }
335
335
 
336
336
  .select__options {
337
- padding: 5px;
338
- margin: 4px;
339
337
  font-size: 14px;
340
338
  color: rgb(133, 129, 129);
341
339
  }
package/dist/nile-textarea/nile-textarea.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: red;\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: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: Arial, sans-serif;\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(\n --nile-colors-white-base\n );\n border: solid 1px var(--nile-colors-neutral-500);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-dark-900\n );\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-primary-600\n );\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(\n --nile-colors-neutral-500\n );\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(\n --nile-colors-dark-500\n );\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em 10px;\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n"]))));}};});
1
+ System.register(["../index-adad7634.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\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: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(\n --nile-colors-white-base\n );\n border: solid 1px var(--nile-colors-neutral-500);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-dark-900\n );\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-primary-600\n );\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(\n --nile-colors-neutral-500\n );\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(\n --nile-colors-dark-500\n );\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em 10px;\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-textarea.css.cjs.js.map
package/dist/nile-textarea/nile-textarea.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.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-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: red;\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: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: Arial, sans-serif;\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(\n --nile-colors-white-base\n );\n border: solid 1px var(--nile-colors-neutral-500);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-dark-900\n );\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-primary-600\n );\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(\n --nile-colors-neutral-500\n );\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(\n --nile-colors-dark-500\n );\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em 10px;\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
1
+ {"version":3,"file":"nile-textarea.css.cjs.js","sources":["../../../src/nile-textarea/nile-textarea.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-element';\n\n/**\n * TextArea CSS\n */\nexport const styles = css`\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-font-size-base);\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\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: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(\n --nile-colors-white-base\n );\n border: solid 1px var(--nile-colors-neutral-500);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-dark-900\n );\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-primary-600\n );\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(\n --nile-colors-neutral-500\n );\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(\n --nile-colors-dark-500\n );\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em 10px;\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG"}
package/dist/nile-textarea/nile-textarea.css.esm.js CHANGED
@@ -27,7 +27,7 @@ import{i as e}from"../index-f1b94546.esm.js";const r=e`
27
27
  :host([required]) .form-control--has-label .form-control__label::after {
28
28
  content: '*';
29
29
  margin-inline-start: -2px;
30
- color: red;
30
+ color: #A4121C;
31
31
  }
32
32
 
33
33
  /* Help text */
@@ -63,9 +63,6 @@ import{i as e}from"../index-f1b94546.esm.js";const r=e`
63
63
  align-items: center;
64
64
  position: relative;
65
65
  width: 100%;
66
- font-family: Arial, sans-serif;
67
- font-weight: 400;
68
- line-height: 1.5;
69
66
  letter-spacing: 0.5px;
70
67
  vertical-align: middle;
71
68
  border-radius: var(--nile-radius-base-standard);
@@ -133,10 +130,12 @@ import{i as e}from"../index-f1b94546.esm.js";const r=e`
133
130
  /* Textarea control styles */
134
131
  .textarea__control {
135
132
  flex: 1 1 auto;
136
- font-family: inherit;
137
- font-size: inherit;
138
- font-weight: inherit;
139
- line-height: 1.4;
133
+ font-family: Colfax-regular;
134
+ font-size: 14px;
135
+ font-style: normal;
136
+ font-weight: 400;
137
+ line-height: 14px; /* 100% */
138
+ letter-spacing: 0.2px;
140
139
  color: var(--nile-colors-dark-900);
141
140
  border: none;
142
141
  background: none;
package/dist/src/nile-input/nile-input.css.js CHANGED
@@ -42,7 +42,7 @@ export const styles = css `
42
42
  :host([required]) .form-control--has-label .form-control__label::after {
43
43
  content: '*';
44
44
  margin-inline-start: -2px;
45
- color: undefined;
45
+ color: #A4121C;
46
46
  }
47
47
 
48
48
  /* Help text */
@@ -79,16 +79,19 @@ export const styles = css `
79
79
  justify-content: start;
80
80
  position: relative;
81
81
  width: 100%;
82
- font-family: inherit;
83
82
  font-weight: 400;
84
- letter-spacing: normal;
85
83
  vertical-align: middle;
86
84
  overflow: hidden;
87
85
  cursor: text;
88
86
  transition: 150ms color, 150ms border, 150ms box-shadow,
89
87
  150ms background-color;
90
88
  box-sizing: border-box;
91
- }
89
+ color: var(--nile-colors-dark-900);
90
+ font-family: Colfax-regular;
91
+ font-size: 14px;
92
+ font-style: normal;
93
+ line-height: 14px;
94
+ letter-spacing: 0.2px; }
92
95
 
93
96
  /* Standard inputs */
94
97
  .input--standard {
@@ -162,12 +165,8 @@ export const styles = css `
162
165
 
163
166
  .input__control {
164
167
  flex: 1 1 auto;
165
- font-family: inherit;
166
- font-size: inherit;
167
- font-weight: inherit;
168
168
  min-width: 0;
169
169
  height: 100%;
170
- color: hsl(240 5.3% 26.1%);
171
170
  border: none;
172
171
  background: none;
173
172
  box-shadow: none;
@@ -175,6 +174,13 @@ export const styles = css `
175
174
  margin: 0;
176
175
  cursor: inherit;
177
176
  -webkit-appearance: none;
177
+ color: var(--nile-colors-dark-900);
178
+ font-family: Colfax-regular;
179
+ font-size: 14px;
180
+ font-style: normal;
181
+ font-weight: 400;
182
+ line-height: 14px;
183
+ letter-spacing: 0.2px;
178
184
  }
179
185
 
180
186
  .input__control::-webkit-search-decoration,
package/dist/src/nile-input/nile-input.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4axB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: undefined;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: inherit;\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: hsl(240 5.3% 26.1%);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkbxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\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: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px; }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"]}
package/dist/src/nile-select/nile-select.css.js CHANGED
@@ -344,8 +344,6 @@ export const styles = css `
344
344
  }
345
345
 
346
346
  .select__options {
347
- padding: 5px;
348
- margin: 4px;
349
347
  font-size: 14px;
350
348
  color: rgb(133, 129, 129);
351
349
  }
package/dist/src/nile-select/nile-select.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2XxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n padding: 5px;\n margin: 4px;\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyXxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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: inline-block;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif);\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif);\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005ea6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n }\n\n .select__options {\n padding-top: 10px;\n }\n\n .select__options {\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n /* Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px 8px 16px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"]}