npm - @aquera/nile-elements - Versions diffs - 2.0.11 → 2.0.13 - Mend

@aquera/nile-elements 2.0.11 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.js CHANGED Viewed

@@ -78,7 +78,9 @@ export const styles = css `
   .title {
     margin: 0;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--ng-line-height-text-lg);
     font-weight: var(
       --nile-font-weight-semi-bold,
       var(--ng-font-weight-semibold)

package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-app-shell-panel.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/nile-app-shell-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiGrB~~,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvB,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';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\n / A flex item of the shell's panel region, filling it. /\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n / The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. /\n .header {\n box-sizing: border-box;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: var(--nile-app-shell-panel-header-height, 56px);\n padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n :host([no-header]) .header {\n display: none;\n }\n\n / The back control for a sub-view; stands where the brand mark does in the root view. /\n .back {\n flex: 0 0 auto;\n margin-inline-start: -6px;\n }\n\n / Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. /\n .close {\n margin-inline-end: -6px;\n }\n\n :host([back]) .mark {\n display: none;\n }\n\n .heading {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n min-width: 0;\n }\n\n .mark {\n display: inline-flex;\n color: var(\n --nile-colors-primary-600,\n var(--ng-colors-fg-brand-primary-600)\n );\n }\n\n .mark nile-glyph {\n --nile-svg-fill: currentColor;\n --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n width: 20px;\n height: 20px;\n }\n\n .title {\n margin: 0;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(\n --nile-font-weight-semi-bold,\n var(--ng-font-weight-semibold)\n );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n margin-inline-start: auto;\n }\n\n :host([no-close]) .close {\n display: none;\n }\n\n / ------------------------------------------------------- utility controls /\n\n / The header's own icon controls (back and close): the shared utility-control recipe. /\n ${utilityControlStyles}\n\n .body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n / 16 under the header, 24 on the sides and bottom. */\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n :host([no-padding]) .body {\n padding: 0;\n }\n\n .footer {\n flex: 0 0 auto;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n :host(:not([has-footer])) .footer {\n display: none;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-app-shell-panel.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/nile-app-shell-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGrB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvB,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';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\n / A flex item of the shell's panel region, filling it. /\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n / The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. /\n .header {\n box-sizing: border-box;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: var(--nile-app-shell-panel-header-height, 56px);\n padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n :host([no-header]) .header {\n display: none;\n }\n\n / The back control for a sub-view; stands where the brand mark does in the root view. /\n .back {\n flex: 0 0 auto;\n margin-inline-start: -6px;\n }\n\n / Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. /\n .close {\n margin-inline-end: -6px;\n }\n\n :host([back]) .mark {\n display: none;\n }\n\n .heading {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n min-width: 0;\n }\n\n .mark {\n display: inline-flex;\n color: var(\n --nile-colors-primary-600,\n var(--ng-colors-fg-brand-primary-600)\n );\n }\n\n .mark nile-glyph {\n --nile-svg-fill: currentColor;\n --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n width: 20px;\n height: 20px;\n }\n\n .title {\n margin: 0;\n / Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. /\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n line-height: var(--ng-line-height-text-lg);\n font-weight: var(\n --nile-font-weight-semi-bold,\n var(--ng-font-weight-semibold)\n );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n margin-inline-start: auto;\n }\n\n :host([no-close]) .close {\n display: none;\n }\n\n / ------------------------------------------------------- utility controls /\n\n / The header's own icon controls (back and close): the shared utility-control recipe. /\n ${utilityControlStyles}\n\n .body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n / 16 under the header, 24 on the sides and bottom. */\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n :host([no-padding]) .body {\n padding: 0;\n }\n\n .footer {\n flex: 0 0 auto;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n :host(:not([has-footer])) .footer {\n display: none;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-select/nile-select.css.js CHANGED Viewed

@@ -233,35 +233,23 @@ export const styles = css `
     display: contents;
   }
-  .select__tags nile-tag {
+  :host([showtooltip]) .select__tags nile-tag {
     flex: 0 1 auto;
     cursor: pointer;
     min-width: 0;
-  }
-  /* A chip is capped - and so truncated - only when a tooltip can reveal the
-     full value. Without one it keeps its natural width and the fit pass moves
-     the surplus into the +N button instead. */
-  :host([showtooltip]) .select__tags nile-tag {
     max-width: var(--nile-width-180px, var(--ng-height-180px));
   }
-  /* Only the fitted layout can move a chip into the +N button, so only there
-     can a chip refuse to shrink. */
-  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
-    flex-shrink: 0;
-  }
-  .select__tags nile-tag::part(base) {
+  :host([showtooltip]) .select__tags nile-tag::part(base) {
     max-width: 100%;
   }
-  .select__tags nile-tag::part(prefix_content_wrapper) {
+  :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {
     flex: 1 1 auto;
     min-width: 0;
   }
-  .select__tags nile-tag::part(content) {
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
@@ -277,7 +265,7 @@ export const styles = css `
     text-overflow: ellipsis;
   }
-  .select__tags nile-tag::part(remove-button) {
+  :host([showtooltip]) .select__tags nile-tag::part(remove-button) {
     flex: 0 0 auto;
   }
@@ -533,6 +521,9 @@ export const styles = css `
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+  .select__pre-footer-area--query {
     container-type: inline-size;
     container-name: nile-select-footer;
   }
@@ -638,6 +629,10 @@ export const styles = css `
     }
   }
+  .select__invisible {
+    opacity: 0;
+  }
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }

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

	@@ -1 +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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED Viewed

@@ -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;