@aquera/nile-elements 1.9.4 → 1.9.6

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\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  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\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  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-chip.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.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 * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\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  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\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-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.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 * Chip CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxxxsmall);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxxsmall);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n    min-height: var(--ng-height-40px);\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--nile-gap-unset, var(--ng-spacing-md));\n  }\n\n  nile-input::part(base) {\n    padding: 0px !important;\n    height: auto;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    \n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n    pointer-events: none;\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-margin-size-rem-small);\n  }\n\n  nile-auto-complete::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n  }\n\n  nile-auto-complete::part(base) {\n    height: auto;\n  }\n  \n  .nile-chip:hover:not(.nile-chip--disabled) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n    box-shadow: var(--nile-box-shadow-10);\n  }\n\n  :host([disabled]) .nile-chip:hover {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    box-shadow: none;\n  }\n\n\n  .nile-chip.nile-chip--open:hover  {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n  }\n\n  .nile-chip__tags--focused::part(base) {\n    border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    gap: 2px;\n  }\n\n  nile-auto-complete::part(base)::before {\n    box-shadow: none;\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  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) nile-auto-complete::part(base) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\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-chip/nile-chip.css.esm.js

@@ -77,11 +77,13 @@ import{css as o}from"lit";const r=o`
   }
 
   .nile-chip {
-    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    min-height: var(--ng-height-40px);
     background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
@@ -90,6 +92,7 @@ import{css as o}from"lit";const r=o`
 
   nile-input::part(base) {
     padding: 0px !important;
+    height: auto;
   }
 
   .nile-chip--no-wrap {
@@ -159,6 +162,10 @@ import{css as o}from"lit";const r=o`
   nile-auto-complete::part(input) {
     padding: var(--nile-spacing-lg, var(--ng-spacing-none));
   }
+
+  nile-auto-complete::part(base) {
+    height: auto;
+  }
   
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));