@aquera/nile-elements 2.0.12 → 2.0.13

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

@@ -1 +1 @@
-{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0pBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-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-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\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-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n  }\n\n  .select--disabled.select--placeholder-visible .select__display-input::placeholder {\n    color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));\n  }\n\n  .select--disabled .select__display-input{\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events:none;\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: nowrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-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-regular));\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  button.select__tags-count {\n    appearance: none;\n    -webkit-appearance: none;\n    background: none;\n    text-align: inherit;\n  }\n\n  button.select__tags-count:disabled {\n    cursor: not-allowed;\n  }\n\n  .select__tags--fitted {\n    min-width: 0;\n  }\n\n  .select__tags nile-lite-tooltip.select__tag-tip {\n    display: contents;\n  }\n\n  .select__tags nile-tag {\n    flex: 0 1 auto;\n    cursor: pointer;\n    min-width: 0;\n  }\n\n  /* A chip is capped - and so truncated - only when a tooltip can reveal the\n     full value. Without one it keeps its natural width and the fit pass moves\n     the surplus into the +N button instead. */\n  :host([showtooltip]) .select__tags nile-tag {\n    max-width: var(--nile-width-180px, var(--ng-height-180px));\n  }\n\n  /* Only the fitted layout can move a chip into the +N button, so only there\n     can a chip refuse to shrink. */\n  :host(:not([showtooltip])) .select__tags--fitted nile-tag {\n    flex-shrink: 0;\n  }\n\n  .select__tags nile-tag::part(base) {\n    max-width: 100%;\n  }\n\n  .select__tags nile-tag::part(prefix_content_wrapper) {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .select__tags nile-tag::part(content) {\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n       box, so descenders are cut. Pad the clip box, negate it in layout. */\n    padding-block: 3px;\n    margin-block: -3px;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(content) {\n    text-overflow: ellipsis;\n  }\n\n  .select__tags nile-tag::part(remove-button) {\n    flex: 0 0 auto;\n  }\n\n  .select__tags--fitted nile-tag:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    outline-offset: 1px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .select__tags--fitted .select__tags-count {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n    height: var(--nile-height-26px, var(--ng-height-26px));\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    cursor: pointer;\n    border: 1px dashed\n      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .select__tags--fitted .select__tags-count:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    outline-offset: 1px;\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-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    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\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    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__pre-footer-area {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    container-type: inline-size;\n    container-name: nile-select-footer;\n  }\n\n  .select__custom-footer {\n    display: block;\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;\n  }\n\n  .select__custom-footer:hover {\n     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n\n  /* Default: visible + centered footer with proper nxtgen fallbacks. */\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    height: 15px;\n    /* Auto layout */\n    display: var(--nile-display-flex, var(--ng-display-flex));\n    flex-direction: row;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-none, var(--ng-spacing-none));\n    justify-content: space-between;\n  }\n\n  .select__footer-action,\n  .select__footer .select__clear {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    min-width: 0;\n  }\n\n  .select__footer-glyph {\n    flex: 0 0 auto;\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .select__footer-label {\n    white-space: nowrap;\n  }\n\n  @container nile-select-footer (max-width: 178px) {\n    .select__clear .select__footer-label {\n      display: none;\n    }\n  }\n\n  @container nile-select-footer (max-width: 137px) {\n    .select__footer-label {\n      display: none;\n    }\n  }\n\n  :host([legacy]) .select__footer {\n    background: var(--nile-colors-neutral-100);\n    border-top: 1px solid var(--nile-colors-neutral-400);\n    display: var(--nile-display-flex, var(--ng-display-none));\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-none, var(--ng-height-24px));\n    max-width: var(--nile-width-none, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n   \n  .select.select--open .select__combobox {\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n    box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n  border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n  border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n:host([stickyHeader]) .select__footer-area {\n  z-index: 1;\n}\n\n.select--disabled .select__combobox{\n  user-select: none ;\n  -webkit-user-select: none ;\n} \n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqpBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n  \n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-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-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\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-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n  }\n\n  .select--disabled.select--placeholder-visible .select__display-input::placeholder {\n    color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));\n  }\n\n  .select--disabled .select__display-input{\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events:none;\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: nowrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-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-regular));\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  button.select__tags-count {\n    appearance: none;\n    -webkit-appearance: none;\n    background: none;\n    text-align: inherit;\n  }\n\n  button.select__tags-count:disabled {\n    cursor: not-allowed;\n  }\n\n  .select__tags--fitted {\n    min-width: 0;\n  }\n\n  .select__tags nile-lite-tooltip.select__tag-tip {\n    display: contents;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag {\n    flex: 0 1 auto;\n    cursor: pointer;\n    min-width: 0;\n    max-width: var(--nile-width-180px, var(--ng-height-180px));\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(base) {\n    max-width: 100%;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(content) {\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n       box, so descenders are cut. Pad the clip box, negate it in layout. */\n    padding-block: 3px;\n    margin-block: -3px;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(content) {\n    text-overflow: ellipsis;\n  }\n\n  :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n    flex: 0 0 auto;\n  }\n\n  .select__tags--fitted nile-tag:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    outline-offset: 1px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .select__tags--fitted .select__tags-count {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n    height: var(--nile-height-26px, var(--ng-height-26px));\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n    cursor: pointer;\n    border: 1px dashed\n      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .select__tags--fitted .select__tags-count:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n    outline-offset: 1px;\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-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    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\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    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__pre-footer-area {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .select__pre-footer-area--query {\n    container-type: inline-size;\n    container-name: nile-select-footer;\n  }\n\n  .select__custom-footer {\n    display: block;\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;\n  }\n\n  .select__custom-footer:hover {\n     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n\n  /* Default: visible + centered footer with proper nxtgen fallbacks. */\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    height: 15px;\n    /* Auto layout */\n    display: var(--nile-display-flex, var(--ng-display-flex));\n    flex-direction: row;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-none, var(--ng-spacing-none));\n    justify-content: space-between;\n  }\n\n  .select__footer-action,\n  .select__footer .select__clear {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    min-width: 0;\n  }\n\n  .select__footer-glyph {\n    flex: 0 0 auto;\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .select__footer-label {\n    white-space: nowrap;\n  }\n\n  @container nile-select-footer (max-width: 178px) {\n    .select__clear .select__footer-label {\n      display: none;\n    }\n  }\n\n  @container nile-select-footer (max-width: 137px) {\n    .select__footer-label {\n      display: none;\n    }\n  }\n\n  :host([legacy]) .select__footer {\n    background: var(--nile-colors-neutral-100);\n    border-top: 1px solid var(--nile-colors-neutral-400);\n    display: var(--nile-display-flex, var(--ng-display-none));\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-none, var(--ng-height-24px));\n    max-width: var(--nile-width-none, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n   \n  .select.select--open .select__combobox {\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n    box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n  border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n  border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n  box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;\n}\n\n:host([stickyHeader]) .select__footer-area {\n  z-index: 1;\n}\n\n.select--disabled .select__combobox{\n  user-select: none ;\n  -webkit-user-select: none ;\n} \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-select/nile-select.d.ts

@@ -88,6 +88,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     private resizeController;
     private visibilityManager?;
     private chipFitFrame;
+    private measurableWatch?;
     private lastChipLayout;
     private clippedChips;
     private clipFrame;
@@ -102,6 +103,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     selectedOptions: NileOption[];
     oldValue: string | string[];
     private hiddenChipCount;
+    oldMaxOptionsVisible: number;
     /** Last measured width of the overflow button, in px. */
     private lastOverflowWidth;
     /** The name of the select, submitted as a name/value pair with form data. */
@@ -156,13 +158,16 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     get maxOptionsVisible(): number;
     set maxOptionsVisible(value: number);
     private get chipFittingEnabled();
+    private get legacyTagFitEnabled();
+    private setFittedMaxOptionsVisible;
     /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
     chipMinWidth: number;
     /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
     chipMaxWidth: number;
     /**
-     * Shows a chip's full value in a tooltip when its text is clipped, and is
-     * what allows a chip to be truncated at all.
+     * Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the
+     * rest collapse into a +N button, and a clipped chip shows its full value in a tooltip.
+     * Off by default, which keeps the pre-2.0.9 chip row.
      */
     showTooltip: boolean;
     /** Disables the select control. */
@@ -225,6 +230,9 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     disconnectedCallback(): void;
     private setupResizeObserver;
     private syncVirtualSelectMaxOptionsVisible;
+    syncValueFromVirtualSelect(event: CustomEvent<{
+        value?: string | string[];
+    }>): void;
     protected updated(_changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     setCheckBoxInOption(checked: boolean): void;
@@ -268,6 +276,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     private handleDefaultSlotChange;
     private handleTagRemove;
     private getAllOptions;
+    private prefixCopies;
     private getOptionPrefixNodes;
     private getFirstOption;
     private setCurrentOption;
@@ -306,15 +315,20 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     blur(): void;
     onInputChange(event: Event): void;
     calculateTotalWidthOfTags(): void;
+    private calculateWidthOfSelectTagsDiv;
+    private fitTagsLegacy;
     private allocateChipWidths;
     private computeChipFit;
     private layoutChips;
+    private labelOverflows;
     private isChipClipped;
     private refreshClippedChips;
     private scheduleClipCheck;
     /** A chip gets a tooltip only while its text is measured as clipped. */
     private chipTooltipDisabled;
     private destroyChipFit;
+    private refitWhenMeasurable;
+    private stopMeasurableWatch;
     private getChipLabel;
     private handleChipKeyDown;
     /** Moves focus to the next chip, the last chip, or the field after a removal. */
@@ -322,6 +336,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     private handleOverflowActivate;
     private handleOverflowKeyDown;
     private renderFittedTags;
+    private renderLegacyTags;
+    private renderLegacyTag;
     handleInputAfterInit(): void;
     render(): any;
     nileInput(value: any): void;

package/dist/src/nile-select/nile-select.js

@@ -100,7 +100,15 @@ let NileSelect = class NileSelect extends NileElement {
         this.requestUpdate('maxOptionsVisible', previous);
     }
     get chipFittingEnabled() {
-        return !!this.multiple && !this.maxOptionsVisibleExplicit;
+        return !!this.multiple && this.showTooltip && !this.maxOptionsVisibleExplicit;
+    }
+    get legacyTagFitEnabled() {
+        return !!this.multiple && !this.showTooltip;
+    }
+    setFittedMaxOptionsVisible(value) {
+        const previous = this._maxOptionsVisible;
+        this._maxOptionsVisible = value;
+        this.requestUpdate('maxOptionsVisible', previous);
     }
     /** Gets the validity state object */
     get validity() {
@@ -118,6 +126,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.scrolling = false;
         this.options = [];
         this.resizeController = new ResizeController(this, {
+            target: null,
             callback: (entries) => {
                 for (const entry of entries) {
                     if (entry.target.classList.contains('select__tags')) {
@@ -135,6 +144,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.selectedOptions = [];
         this.oldValue = '';
         this.hiddenChipCount = 0;
+        this.oldMaxOptionsVisible = 1;
         /** Last measured width of the overflow button, in px. */
         this.lastOverflowWidth = 0;
         /** The name of the select, submitted as a name/value pair with form data. */
@@ -191,8 +201,9 @@ let NileSelect = class NileSelect extends NileElement {
         /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
         this.chipMaxWidth = 180;
         /**
-         * Shows a chip's full value in a tooltip when its text is clipped, and is
-         * what allows a chip to be truncated at all.
+         * Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the
+         * rest collapse into a +N button, and a clipped chip shows its full value in a tooltip.
+         * Off by default, which keeps the pre-2.0.9 chip row.
          */
         this.showTooltip = false;
         /** Disables the select control. */
@@ -250,6 +261,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.handleWindowScroll = () => {
             this.portalManager.updatePortalAppendPosition();
         };
+        this.prefixCopies = new WeakMap();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -266,6 +278,9 @@ let NileSelect = class NileSelect extends NileElement {
         this.handleWindowScroll = this.handleWindowScroll.bind(this);
         // Because this is a form control, it shouldn't be opened initially
         this.open = false;
+        if (this.hasUpdated && this.chipFittingEnabled) {
+            this.calculateTotalWidthOfTags();
+        }
         this.emit('nile-init');
     }
     disconnectedCallback() {
@@ -282,7 +297,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.emit('nile-destroy');
     }
     setupResizeObserver() {
-        const wanted = this.autoResize && this.chipFittingEnabled
+        const wanted = this.autoResize && (this.chipFittingEnabled || this.legacyTagFitEnabled)
             ? this.shadowRoot?.querySelector('.select__tags') ??
                 undefined
             : undefined;
@@ -312,6 +327,13 @@ let NileSelect = class NileSelect extends NileElement {
             inner.maxOptionsVisible = this._maxOptionsVisible;
         }
     }
+    syncValueFromVirtualSelect(event) {
+        if (event.composedPath()[0] !== event.currentTarget)
+            return;
+        if (!event.detail || !('value' in event.detail))
+            return;
+        this.value = event.detail.value ?? (this.multiple ? [] : '');
+    }
     updated(_changedProperties) {
         if (_changedProperties.has('searchEnabled')) {
             this.updateGroupStickyOffsets();
@@ -327,9 +349,15 @@ let NileSelect = class NileSelect extends NileElement {
         }
         if (_changedProperties.has('autoResize') ||
             _changedProperties.has('multiple') ||
-            _changedProperties.has('maxOptionsVisible')) {
+            _changedProperties.has('maxOptionsVisible') ||
+            _changedProperties.has('showTooltip')) {
             this.setupResizeObserver();
         }
+        if (_changedProperties.has('showTooltip') &&
+            _changedProperties.get('showTooltip') !== undefined &&
+            this.legacyTagFitEnabled) {
+            this.calculateTotalWidthOfTags();
+        }
         this.syncVirtualSelectMaxOptionsVisible();
         if (_changedProperties.has('enableDescription')) {
             this.setEnableDescriptionInOptions();
@@ -799,11 +827,23 @@ let NileSelect = class NileSelect extends NileElement {
         }
         return options;
     }
-    getOptionPrefixNodes(option) {
+    getOptionPrefixNodes(option, site) {
         const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]');
         if (!prefixSlot)
             return [];
-        return prefixSlot.assignedElements().map(el => el.cloneNode(true));
+        const sources = prefixSlot.assignedElements();
+        const markup = sources.map(el => el.outerHTML).join('');
+        let sites = this.prefixCopies.get(option);
+        if (!sites) {
+            sites = new Map();
+            this.prefixCopies.set(option, sites);
+        }
+        const cached = sites.get(site);
+        if (cached && cached.markup === markup)
+            return cached.nodes;
+        const nodes = sources.map(el => el.cloneNode(true));
+        sites.set(site, { markup, nodes });
+        return nodes;
     }
     // Gets the first <nile-option> element
     getFirstOption() {
@@ -1135,6 +1175,10 @@ let NileSelect = class NileSelect extends NileElement {
         event.stopPropagation();
     }
     calculateTotalWidthOfTags() {
+        if (this.legacyTagFitEnabled) {
+            this.fitTagsLegacy();
+            return;
+        }
         if (!this.chipFittingEnabled)
             return;
         if (this.chipFitFrame)
@@ -1144,6 +1188,49 @@ let NileSelect = class NileSelect extends NileElement {
             this.layoutChips();
         });
     }
+    calculateWidthOfSelectTagsDiv() {
+        if (this.shadowRoot) {
+            const selectTagsDiv = this.shadowRoot.querySelector('div.select__tags');
+            if (selectTagsDiv instanceof HTMLElement) {
+                const width = selectTagsDiv.offsetWidth;
+                return width - 70;
+            }
+        }
+    }
+    fitTagsLegacy() {
+        if (this.maxOptionsVisible !== Infinity) {
+            this.oldMaxOptionsVisible = this.maxOptionsVisible;
+        }
+        this.setFittedMaxOptionsVisible(Infinity);
+        setTimeout(() => {
+            const widths = [];
+            if (this.shadowRoot) {
+                const tags = this.shadowRoot.querySelectorAll('nile-tag');
+                tags.forEach(tag => {
+                    if (tag instanceof HTMLElement) {
+                        widths.push(tag.offsetWidth);
+                    }
+                });
+            }
+            if (this.value.length !== widths.length) {
+                return;
+            }
+            const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
+            if (!widthOfSelectTagsDiv) {
+                return;
+            }
+            let summ = 0;
+            let lastindex = 0;
+            for (let i = 0; i < widths.length; i++) {
+                summ += widths[i];
+                if (summ > widthOfSelectTagsDiv) {
+                    lastindex = i;
+                    break;
+                }
+            }
+            this.setFittedMaxOptionsVisible(lastindex);
+        }, 1);
+    }
     allocateChipWidths(natural, available) {
         const min = this.chipMinWidth;
         const max = this.chipMaxWidth;
@@ -1223,6 +1310,11 @@ let NileSelect = class NileSelect extends NileElement {
             this.hiddenChipCount = 0;
             return;
         }
+        if (container.clientWidth === 0) {
+            this.refitWhenMeasurable(container);
+            return;
+        }
+        this.stopMeasurableWatch();
         const overflowEl = container.querySelector('.select__tags-count');
         for (const chip of chips) {
             chip.style.display = '';
@@ -1268,13 +1360,45 @@ let NileSelect = class NileSelect extends NileElement {
         }
         this.refreshClippedChips();
     }
+    labelOverflows(content) {
+        let left = Infinity;
+        let right = -Infinity;
+        const range = document.createRange();
+        for (const node of content.assignedNodes({ flatten: true })) {
+            let rect;
+            if (node.nodeType === Node.TEXT_NODE) {
+                if (!node.textContent?.trim())
+                    continue;
+                range.selectNodeContents(node);
+                rect = range.getBoundingClientRect();
+            }
+            else if (node instanceof Element) {
+                rect = node.getBoundingClientRect();
+            }
+            else {
+                continue;
+            }
+            if (rect.width === 0)
+                continue;
+            left = Math.min(left, rect.left);
+            right = Math.max(right, rect.right);
+        }
+        if (right < left)
+            return false;
+        const box = content.getBoundingClientRect();
+        const styles = getComputedStyle(content);
+        const boxLeft = box.left + parseFloat(styles.borderLeftWidth) + parseFloat(styles.paddingLeft);
+        const boxRight = box.right - parseFloat(styles.borderRightWidth) - parseFloat(styles.paddingRight);
+        const epsilon = 1 / 64;
+        return right > boxRight + epsilon || left < boxLeft - epsilon;
+    }
     isChipClipped(el) {
         if (!el)
             return false;
         const root = el.shadowRoot;
         if (root) {
             const content = root.querySelector('[part="content"]');
-            if (content && content.scrollWidth > content.clientWidth + 1)
+            if (content && this.labelOverflows(content))
                 return true;
             const inner = root.querySelector('[part="prefix_content_wrapper"]');
             if (inner && inner.scrollWidth > inner.clientWidth + 1)
@@ -1316,6 +1440,26 @@ let NileSelect = class NileSelect extends NileElement {
             cancelAnimationFrame(this.clipFrame);
         this.clipFrame = 0;
         this.lastChipLayout = { hidden: -1, visible: -1 };
+        this.stopMeasurableWatch();
+    }
+    refitWhenMeasurable(container) {
+        if (!this.isConnected)
+            return;
+        if (this.measurableWatch?.target === container)
+            return;
+        this.stopMeasurableWatch();
+        const observer = new ResizeObserver(entries => {
+            if (!entries.some(entry => entry.contentRect.width > 0))
+                return;
+            this.stopMeasurableWatch();
+            this.calculateTotalWidthOfTags();
+        });
+        observer.observe(container);
+        this.measurableWatch = { observer, target: container };
+    }
+    stopMeasurableWatch() {
+        this.measurableWatch?.observer.disconnect();
+        this.measurableWatch = undefined;
     }
     getChipLabel(option) {
         return (option.getTextLabel?.() ?? '').trim();
@@ -1370,7 +1514,7 @@ let NileSelect = class NileSelect extends NileElement {
       <div part="tags" class="select__tags select__tags--fitted">
         ${this.selectedOptions.map((option, index) => {
             const label = this.getChipLabel(option);
-            const prefixNodes = this.getOptionPrefixNodes(option);
+            const prefixNodes = this.getOptionPrefixNodes(option, 'chip');
             return html `
             <nile-lite-tooltip
               class="select__tag-tip"
@@ -1422,6 +1566,65 @@ let NileSelect = class NileSelect extends NileElement {
       </div>
     `;
     }
+    renderLegacyTags() {
+        return html `
+      <div part="tags" class="select__tags">
+        ${this.selectedOptions.map((option, index) => {
+            if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+                return this.showTooltip
+                    ? html `<nile-lite-tooltip
+                  class="select__tag-tip"
+                  .content=${option.getTextLabel()}
+                  ?disabled=${this.chipTooltipDisabled(index)}
+                  >${this.renderLegacyTag(option, index)}</nile-lite-tooltip
+                >`
+                    : this.renderLegacyTag(option, index);
+            }
+            else if (index === this.maxOptionsVisible) {
+                return html `
+              <span class="select__tags-count"
+                >+${this.selectedOptions.length - index} More
+              </span>
+            `;
+            }
+            else {
+                return null;
+            }
+        })}
+      </div>
+    `;
+    }
+    renderLegacyTag(option, index) {
+        const prefixNodes = this.getOptionPrefixNodes(option, 'chip');
+        const classes = {
+            select__invisible: index + 1 > this.oldMaxOptionsVisible &&
+                this.maxOptionsVisible === Infinity,
+        };
+        return html `
+      <nile-tag
+        class=${classMap(classes)}
+        part="tag"
+        exportparts="
+            base:tag__base,
+            content:tag__content,
+            remove-button:tag__remove-button,
+            remove-button__base:tag__remove-button__base,
+            prefix:tag__prefix,
+            prefix_content_wrapper:tag__prefix_content_wrapper
+          "
+        style=${ifDefined(this.showTooltip ? `max-width:${this.chipMaxWidth}px` : undefined)}
+        ?pill=${this.pill}
+        size=${this.size}
+        removable
+        @nile-remove=${(event) => this.handleTagRemove(event, option)}
+      >
+        ${prefixNodes.length
+            ? html `<span class="tag__prefix" slot="prefix">${prefixNodes}</span>`
+            : ''}
+        ${option.getTextLabel()}
+      </nile-tag>
+    `;
+    }
     handleInputAfterInit() {
         this.shadowRoot?.querySelector('nile-input')?.inputFocus();
     }
@@ -1439,7 +1642,7 @@ let NileSelect = class NileSelect extends NileElement {
         const hasHelpText = (this.helpText || this.help_text) ? true : false;
         const hasErrorMessage = this.errorMessage ? true : false;
         const prefixNodes = this.selectedOptions[0]
-            ? this.getOptionPrefixNodes(this.selectedOptions[0])
+            ? this.getOptionPrefixNodes(this.selectedOptions[0], 'trigger')
             : [];
         return html `
       <div
@@ -1553,57 +1756,7 @@ let NileSelect = class NileSelect extends NileElement {
               ${this.multiple
             ? this.chipFittingEnabled
                 ? this.renderFittedTags()
-                : html `
-                    <div part="tags" class="select__tags">
-                      ${this.selectedOptions.map((option, index) => {
-                    if (index < this.maxOptionsVisible ||
-                        this.maxOptionsVisible <= 0) {
-                        const prefixNodes = this.getOptionPrefixNodes(option);
-                        return html `
-                            <nile-lite-tooltip
-                              class="select__tag-tip"
-                              .content=${option.getTextLabel()}
-                              ?disabled=${this.chipTooltipDisabled(index)}
-                            >
-                            <nile-tag
-                              part="tag"
-                              exportparts="
-                                  base:tag__base,
-                                  content:tag__content,
-                                  remove-button:tag__remove-button,
-                                  remove-button__base:tag__remove-button__base,
-                                  prefix:tag__prefix,
-                                  prefix_content_wrapper:tag__prefix_content_wrapper
-                                "
-                              style="max-width:${this.chipMaxWidth}px"
-                              ?pill=${this.pill}
-                              size=${this.size}
-                              removable
-                              @nile-remove=${(event) => this.handleTagRemove(event, option)}
-                            >
-                              ${prefixNodes.length
-                            ? html `<span class="tag__prefix" slot="prefix"
-                                    >${prefixNodes}</span
-                                  >`
-                            : ''}
-                              ${option.getTextLabel()}
-                            </nile-tag>
-                            </nile-lite-tooltip>
-                          `;
-                    }
-                    else if (index === this.maxOptionsVisible) {
-                        return html `
-                            <span class="select__tags-count"
-                              >+${this.selectedOptions.length - index} More
-                            </span>
-                          `;
-                    }
-                    else {
-                        return null;
-                    }
-                })}
-                    </div>
-                  `
+                : this.renderLegacyTags()
             : ''}
 
               <input
@@ -1715,7 +1868,13 @@ let NileSelect = class NileSelect extends NileElement {
               </div>
 
               ${this.hasSlotController.test('pre-footer') || this.multiple
-            ? html `<div part="footer-area" class="select__pre-footer-area">
+            ? html `<div
+                    part="footer-area"
+                    class=${classMap({
+                'select__pre-footer-area': true,
+                'select__pre-footer-area--query': !this.noWidthSync || this.portal,
+            })}
+                  >
                     ${this.hasSlotController.test('pre-footer')
                 ? html `
                       <div part="pre-footer" @click=${this.handlePreFooterClick}>  
@@ -1827,6 +1986,9 @@ __decorate([
 __decorate([
     state()
 ], NileSelect.prototype, "hiddenChipCount", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "oldMaxOptionsVisible", void 0);
 __decorate([
     property()
 ], NileSelect.prototype, "name", void 0);
@@ -1922,10 +2084,10 @@ __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileSelect.prototype, "maxOptionsVisible", null);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileSelect.prototype, "chipMinWidth", void 0);
 __decorate([
-    property({ type: Number, reflect: true, attribute: true })
+    property({ type: Number, attribute: true })
 ], NileSelect.prototype, "chipMaxWidth", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })