@aquera/nile-elements 1.5.5 → 1.5.7

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_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: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-medium));\n    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  /* 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-sm, var(--ng-radius-md));\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) box-shadow, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) background-color;\n    cursor: text;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));\n  border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.textarea--standard.textarea--focused:not(.textarea--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n\n  .textarea--standard.textarea--warning:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-warning));\n  }\n\n  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-warning-subtle));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--error:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--success:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-success));\n  }\n\n  .textarea--standard.textarea--success.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-success));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));\n    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-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(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));\n    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    //TODO: Need Token from design system\n    border: 1px solid var(--nile-colors-red-500);\n    //TODO: Need Token from design system\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n    max-height: 300px;\n    overflow-y: auto;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    word-break: break-all;\n    overflow-wrap: break-word;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-medium));\n    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\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-sm, var(--ng-radius-md));\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) box-shadow, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) background-color;\n    cursor: text;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));\n  border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.textarea--standard.textarea--focused:not(.textarea--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n\n  .textarea--standard.textarea--warning:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-warning));\n  }\n\n  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-warning-subtle));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--error:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--success:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-success));\n  }\n\n  .textarea--standard.textarea--success.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-success));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border: none;\n    background: none;\n    box-shadow: none;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    cursor: not-allowed;\n    resize: 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(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));\n    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    //TODO: Need Token from design system\n    border: 1px solid var(--nile-colors-red-500);\n    //TODO: Need Token from design system\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n    max-height: 300px;\n    overflow-y: auto;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    word-break: break-all;\n    overflow-wrap: break-word;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-textarea.css.cjs.js.map

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

@@ -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';\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: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-medium));\n    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  /* 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-sm, var(--ng-radius-md));\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) box-shadow, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) background-color;\n    cursor: text;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));\n  border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.textarea--standard.textarea--focused:not(.textarea--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n\n  .textarea--standard.textarea--warning:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-warning));\n  }\n\n  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-warning-subtle));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--error:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--success:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-success));\n  }\n\n  .textarea--standard.textarea--success.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-success));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));\n    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-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(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));\n    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    //TODO: Need Token from design system\n    border: 1px solid var(--nile-colors-red-500);\n    //TODO: Need Token from design system\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n    max-height: 300px;\n    overflow-y: auto;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    word-break: break-all;\n    overflow-wrap: break-word;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-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';\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: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-medium));\n    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));\n    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n  }\n\n  /* Host styles */\n  :host {\n    display: block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\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-sm, var(--ng-radius-md));\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) box-shadow, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) background-color;\n    cursor: text;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));\n    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n  position: relative; \n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));\n  border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));\n  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */\n}\n\n/* Added to apply the hover effect in nxtgen  */\n.textarea--standard.textarea--focused:not(.textarea--disabled)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;  \n  pointer-events: none; \n  border-radius: 6.5px;\n  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);\n}\n\n\n  .textarea--standard.textarea--warning:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-warning));\n  }\n\n  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-warning-subtle));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--error:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-error));\n  }\n\n  .textarea--standard.textarea--success:not(.textarea--disabled):hover {\n    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-success));\n  }\n\n  .textarea--standard.textarea--success.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-success));\n    border-width: var(--nile-border-width-1, var(--ng-border-width-2));\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled)\n    .textarea__control {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .textarea--standard.textarea--disabled {\n    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    cursor: not-allowed;\n    user-select: none;\n    -webkit-user-select: none;\n    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n  }\n\n  /* Textarea control styles */\n  .textarea__control {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border: none;\n    background: none;\n    box-shadow: none;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    cursor: not-allowed;\n    resize: 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(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  .textarea--medium .textarea__control {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /* Resize types */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--resize-auto .textarea__control {\n    resize: none;\n    overflow-y: hidden;\n    min-height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .textarea--standard.textarea--warning {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));\n  }\n\n  .textarea--standard.textarea--error {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));\n  }\n\n  .textarea--standard.textarea--success {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  .textarea--standard.textarea--destructive {\n    border-color: var(--nile-colors-red-400);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .textarea--standard.textarea--destructive.textarea--focused {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));\n    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));\n  }\n\n  .input__non-printable {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    //TODO: Need Token from design system\n    border: 1px solid var(--nile-colors-red-500);\n    //TODO: Need Token from design system\n    color: var(--nile-colors-red-500);\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n    max-height: 300px;\n    overflow-y: auto;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    word-break: break-all;\n    overflow-wrap: break-word;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -10,7 +10,7 @@ import{css as r}from"lit";const e=r`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-sm));
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
     color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
@@ -61,6 +61,11 @@ import{css as r}from"lit";const e=r`
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
+  :host([disabled]) .form-control--has-label .form-control__label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
   /* Textarea styles */
   .textarea {
     display: flex;
@@ -145,18 +150,20 @@ import{css as r}from"lit";const e=r`
 
   .textarea--standard.textarea--disabled {
     border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
-    background: var(--nile-textarea-standard-disabled-background-color, var(--ng-colors-border-disabled-subtle));
-    opacity: 0.5;
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     cursor: not-allowed;
+    user-select: none;
+    -webkit-user-select: none;
     box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events: none;
   }
 
   .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
   }
 
   /* Textarea control styles */
@@ -176,6 +183,11 @@ import{css as r}from"lit";const e=r`
     -webkit-appearance: none;
   }
 
+  .textarea--standard.textarea--disabled .textarea__control {
+    cursor: not-allowed;
+    resize: none;
+  }
+
   .textarea__control::-webkit-search-decoration,
   .textarea__control::-webkit-search-cancel-button,
   .textarea__control::-webkit-search-results-button,
@@ -193,7 +205,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .textarea--medium .textarea__control {
-    padding: var(--nile-textarea-padding, var(--ng-spacing-lg)) var(--nile-textarea-padding, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   /* Resize types */