@aquera/nile-elements 2.0.12 → 2.0.14
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.
- package/README.md +13 -0
- package/dist/index.js +132 -134
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.css.esm.js +5 -2
- package/dist/nile-chip/nile-chip.css.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.css.esm.js +2 -0
- package/dist/nile-combobox/nile-combobox.css.cjs.js +1 -1
- package/dist/nile-combobox/nile-combobox.css.cjs.js.map +1 -1
- package/dist/nile-combobox/nile-combobox.css.esm.js +9 -9
- package/dist/nile-command-menu/nile-command-menu.css.cjs.js +1 -1
- package/dist/nile-command-menu/nile-command-menu.css.cjs.js.map +1 -1
- package/dist/nile-command-menu/nile-command-menu.css.esm.js +5 -5
- package/dist/nile-command-menu-item/nile-command-menu-item.css.cjs.js +1 -1
- package/dist/nile-command-menu-item/nile-command-menu-item.css.cjs.js.map +1 -1
- package/dist/nile-command-menu-item/nile-command-menu-item.css.esm.js +2 -2
- package/dist/nile-option/nile-option.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +1 -1
- package/dist/nile-select/nile-select.cjs.js +2 -2
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.cjs.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.esm.js +19 -24
- package/dist/nile-select/nile-select.esm.js +43 -42
- package/dist/nile-select/virtual-scroll-helper.cjs.js +1 -1
- package/dist/nile-select/virtual-scroll-helper.cjs.js.map +1 -1
- package/dist/nile-select/virtual-scroll-helper.esm.js +2 -0
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js +4 -4
- package/dist/nile-virtual-select/nile-virtual-select.cjs.js.map +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js.map +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.esm.js +20 -25
- package/dist/nile-virtual-select/nile-virtual-select.esm.js +26 -26
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js +3 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map +1 -1
- package/dist/src/nile-chip/nile-chip.css.js +2 -0
- package/dist/src/nile-chip/nile-chip.css.js.map +1 -1
- package/dist/src/nile-combobox/nile-combobox.css.js +9 -9
- package/dist/src/nile-combobox/nile-combobox.css.js.map +1 -1
- package/dist/src/nile-command-menu/nile-command-menu.css.js +5 -5
- package/dist/src/nile-command-menu/nile-command-menu.css.js.map +1 -1
- package/dist/src/nile-command-menu-item/nile-command-menu-item.css.js +2 -2
- package/dist/src/nile-command-menu-item/nile-command-menu-item.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.css.js +1 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +19 -24
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +18 -2
- package/dist/src/nile-select/nile-select.js +226 -64
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-select/nile-select.test.d.ts +1 -0
- package/dist/src/nile-select/nile-select.test.js +896 -17
- package/dist/src/nile-select/nile-select.test.js.map +1 -1
- package/dist/src/nile-select/virtual-scroll-helper.js +2 -0
- package/dist/src/nile-select/virtual-scroll-helper.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js +20 -25
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.d.ts +10 -2
- package/dist/src/nile-virtual-select/nile-virtual-select.js +142 -30
- package/dist/src/nile-virtual-select/nile-virtual-select.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.test.d.ts +1 -0
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js +331 -16
- package/dist/src/nile-virtual-select/nile-virtual-select.test.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.css.ts +3 -0
- package/src/nile-chip/nile-chip.css.ts +2 -0
- package/src/nile-combobox/nile-combobox.css.ts +9 -9
- package/src/nile-command-menu/nile-command-menu.css.ts +5 -5
- package/src/nile-command-menu-item/nile-command-menu-item.css.ts +2 -2
- package/src/nile-option/nile-option.css.ts +1 -1
- package/src/nile-select/nile-select.css.ts +19 -24
- package/src/nile-select/nile-select.test.ts +1112 -17
- package/src/nile-select/nile-select.ts +237 -67
- package/src/nile-select/virtual-scroll-helper.ts +2 -0
- package/src/nile-virtual-select/nile-virtual-select.css.ts +20 -25
- package/src/nile-virtual-select/nile-virtual-select.test.ts +404 -16
- package/src/nile-virtual-select/nile-virtual-select.ts +200 -79
- package/vscode-html-custom-data.json +9 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MxB,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 * Chip CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n min-height: var(--ng-height-40px);\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n height: auto;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n\n /* opacity: 0.5; */\n cursor: not-allowed;\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n pointer-events: none;\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n\n nile-auto-complete::part(input) {\n padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n }\n\n nile-auto-complete::part(base) {\n height: auto;\n background-color: transparent;\n }\n\n .nile-chip:hover:not(.nile-chip--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n box-shadow: var(--nile-box-shadow-10);\n }\n\n :host([disabled]) .nile-chip:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n box-shadow: none;\n }\n\n .nile-chip.nile-chip--open:hover,\n :host(:not([disabled])) .nile-chip:focus-within {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10, 0 0 0 1px var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n }\n\n .nile-chip__tags--focused::part(base) {\n border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n gap: 2px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) nile-auto-complete::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -105,7 +105,7 @@ export const styles = css `
|
|
|
105
105
|
.combobox--focused .combobox__trigger {
|
|
106
106
|
border-color: var(--ng-colors-border-brand);
|
|
107
107
|
box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;
|
|
108
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
108
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.combobox--disabled .combobox__trigger {
|
|
@@ -159,7 +159,7 @@ export const styles = css `
|
|
|
159
159
|
|
|
160
160
|
.combobox--filled .combobox__trigger {
|
|
161
161
|
border: none;
|
|
162
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
162
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
.combobox--filled.combobox--open .combobox__trigger,
|
|
@@ -354,7 +354,7 @@ export const styles = css `
|
|
|
354
354
|
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
|
|
355
355
|
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
356
356
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
357
|
-
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
357
|
+
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
358
358
|
border-radius: var(--nile-radius-sm, var(--ng-radius-md));
|
|
359
359
|
padding: 0;
|
|
360
360
|
max-width: var(--auto-size-available-width);
|
|
@@ -414,7 +414,7 @@ export const styles = css `
|
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
.combobox__options nile-option[selected] {
|
|
417
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
417
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
.combobox__options nile-option[selected]::part(base) {
|
|
@@ -439,7 +439,7 @@ export const styles = css `
|
|
|
439
439
|
justify-content: space-between;
|
|
440
440
|
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
441
441
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
442
|
-
border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
442
|
+
border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
443
443
|
padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
444
444
|
user-select: none;
|
|
445
445
|
}
|
|
@@ -489,7 +489,7 @@ export const styles = css `
|
|
|
489
489
|
.combobox__footer {
|
|
490
490
|
flex-shrink: 0;
|
|
491
491
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
492
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
492
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
493
493
|
display: flex;
|
|
494
494
|
flex-direction: row;
|
|
495
495
|
align-items: center;
|
|
@@ -628,7 +628,7 @@ export const styles = css `
|
|
|
628
628
|
}
|
|
629
629
|
|
|
630
630
|
.combobox__grid-col {
|
|
631
|
-
border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-
|
|
631
|
+
border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-primary));
|
|
632
632
|
}
|
|
633
633
|
|
|
634
634
|
.combobox__grid-col:last-child {
|
|
@@ -678,7 +678,7 @@ export const styles = css `
|
|
|
678
678
|
overflow: hidden;
|
|
679
679
|
}
|
|
680
680
|
.combobox__group-sticky-overlay .combobox__group-header {
|
|
681
|
-
box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-
|
|
681
|
+
box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
|
|
682
682
|
}
|
|
683
683
|
|
|
684
684
|
.combobox__group-header {
|
|
@@ -702,7 +702,7 @@ export const styles = css `
|
|
|
702
702
|
letter-spacing: 0.06em;
|
|
703
703
|
color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
|
|
704
704
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
705
|
-
border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-
|
|
705
|
+
border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
|
|
706
706
|
pointer-events: none;
|
|
707
707
|
user-select: none;
|
|
708
708
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAutBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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\nexport const styles = css`\n :host {\n display: block;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n /* ── Form control ── */\n\n .form-control .form-control__label {\n display: none;\n }\n\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-md));\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 :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* ── Popup ── */\n\n .combobox-popup {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .combobox-popup::part(popup) {\n z-index: 9999;\n }\n\n .combobox-popup[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .combobox-popup[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* ── Trigger: outer row that never scrolls ── */\n\n .combobox__trigger {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n position: relative;\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 cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\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: none;\n }\n\n .combobox__trigger:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n }\n\n .combobox--open .combobox__trigger,\n .combobox--focused .combobox__trigger {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--disabled .combobox__trigger {\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-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n user-select: none;\n }\n\n .combobox--warning .combobox__trigger {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .combobox--error .combobox__trigger {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .combobox--success .combobox__trigger {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Size: small */\n .combobox--small .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n min-height: var(--nile-height-32px, var(--ng-height-32px));\n }\n\n /* Size: medium */\n .combobox--medium .combobox__trigger {\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 padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n min-height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n /* Size: large */\n .combobox--large .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n min-height: var(--nile-height-48px, var(--ng-height-48px));\n }\n\n .combobox--pill .combobox__trigger {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n .combobox--filled .combobox__trigger {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--filled.combobox--open .combobox__trigger,\n .combobox--filled.combobox--focused .combobox__trigger {\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* ── Inner area: holds tags + input ── */\n\n .combobox__scroll-area {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n overflow: hidden;\n }\n\n /* Single-line: horizontal scroll for overflowing tags */\n .combobox__scroll-area--single-line {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar {\n height: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n /* Wrap: tags flow to multiple lines, trigger grows in height */\n .combobox__scroll-area--wrap {\n flex-wrap: wrap;\n overflow: visible;\n }\n\n /* ── Tags inside the scroll area ── */\n\n .combobox__scroll-area nile-tag {\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .combobox--disabled .combobox__scroll-area nile-tag {\n cursor: not-allowed;\n }\n\n .combobox__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-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* ── Input wrapper inside scroll area ── */\n\n .combobox__input-wrapper {\n flex: 1;\n min-width: 60px;\n display: flex;\n align-items: center;\n }\n\n .combobox__input {\n width: 100%;\n font: inherit;\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: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: inherit;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-overflow: ellipsis;\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n }\n\n .combobox__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 }\n\n .combobox__input:focus {\n outline: none;\n }\n\n .combobox--disabled .combobox__input {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* ── Hidden form value input ── */\n\n .combobox__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n /* ── Action icons (clear, expand) ── */\n\n .combobox__actions {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n margin-inline-start: auto;\n }\n\n .combobox__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n transition: 150ms color;\n }\n\n .combobox__clear:hover {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__clear:focus {\n outline: none;\n }\n\n .combobox__expand-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: 250ms rotate ease;\n rotate: 0;\n }\n\n .combobox--open .combobox__expand-icon {\n rotate: -180deg;\n }\n\n /* ── Prefix / suffix ── */\n\n .combobox__prefix,\n .combobox__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .combobox__prefix {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n /* ── Listbox (dropdown) ── */\n\n .combobox__listbox {\n display: flex;\n flex-direction: column;\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: 0;\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */\n box-sizing: border-box;\n }\n\n .combobox__options-scroll {\n overflow-y: auto;\n flex: 0 1 auto;\n min-height: 0;\n }\n\n /* ── Options ── */\n\n .combobox__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n display: block;\n position: relative;\n width: 100%;\n padding-bottom: 0;\n box-sizing: border-box;\n }\n\n .combobox__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\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-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n }\n\n .combobox__no-results-title {\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n }\n\n .combobox__no-results-subtitle {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* ── Options (both virtual and plain) ── */\n\n .combobox__options nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__options nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox__options nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .combobox__options-plain {\n display: flex;\n flex-direction: column;\n }\n\n .combobox__options-plain nile-option {\n flex-shrink: 0;\n }\n\n /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n .combobox__top-actions {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n user-select: none;\n }\n\n .combobox__top-actions--disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n\n .combobox__select-all {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n cursor: pointer;\n flex: 1 1 auto;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__show-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n border: none;\n background: none;\n padding: 0;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n cursor: pointer;\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 line-height: 14px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n }\n\n .combobox__show-toggle[disabled] {\n color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n cursor: not-allowed;\n }\n\n /* ── Footer ── */\n\n .combobox__footer {\n flex-shrink: 0;\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 display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);\n margin-top: 0;\n }\n\n .combobox__footer.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__footer-clear {\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\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 letter-spacing: 0.2px;\n }\n\n .combobox__footer-clear:hover {\n text-decoration: underline;\n }\n\n /* ── Loader ── */\n\n .combobox__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .combobox__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: combobox-spin 0.6s linear infinite;\n }\n\n .combobox__loader--center {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n @keyframes combobox-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .combobox__add-option::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n /* ── Grid layout ── */\n\n :host([grid-columns]) .combobox__options-scroll {\n overflow-y: auto;\n }\n\n .combobox__grid-row {\n width: 100%;\n }\n\n .combobox__grid-row nile-option {\n min-width: 0;\n overflow: hidden;\n }\n\n .combobox__grid-row nile-option::part(base) {\n border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n }\n\n /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n .combobox__listbox.combobox__listbox--bidirectional {\n max-width: none;\n }\n\n .combobox__listbox--bidirectional .combobox__options-scroll {\n overflow: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--bidirectional .combobox__options {\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__listbox--bidirectional .combobox__grid-row {\n width: max-content;\n min-width: 100%;\n }\n\n /* ── Horizontal grid layout ── */\n\n .combobox__listbox.combobox__listbox--horizontal {\n overflow-x: auto;\n overflow-y: hidden;\n max-height: none;\n max-width: none;\n width: 100%;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar {\n height: 6px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .combobox__options--horizontal {\n display: block;\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__grid-col {\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n }\n\n .combobox__grid-col:last-child {\n border-right: none;\n }\n\n .combobox__grid-col nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__grid-col nile-option::part(base) {\n border-radius: 0;\n }\n\n /* ── Group headers (data-driven grouping) ── */\n\n /* Plain (non-virtualized) listbox: sticky relative to the scroll container.\n * Activated only when the host has [sticky-group-header]. */\n :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {\n position: sticky;\n top: calc(var(--group-depth, 0) * 28px);\n z-index: 1;\n }\n\n /* Virtualized listbox: each row is absolutely positioned by the virtualizer.\n * Sticky doesn't pin against the scroll container because the row wrapper's\n * transform creates a containing block. Instead we render a separate\n * overlay inside the listbox that mirrors the currently-active group\n * header (computed on scroll). */\n .combobox__group-header-slot {\n pointer-events: none;\n z-index: 3;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n .combobox__group-header-slot .combobox__group-header {\n height: 100%;\n box-sizing: border-box;\n }\n\n .combobox__group-sticky-overlay {\n position: sticky;\n top: 0;\n z-index: 2;\n pointer-events: none;\n height: 32px;\n overflow: hidden;\n }\n .combobox__group-sticky-overlay .combobox__group-header {\n box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .combobox__group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n /* Match the listbox's natural inline padding so the header sits like a\n * section divider, edge-to-edge with options. Nested groups indent by\n * depth. Override with --combobox-group-header-indent if needed. */\n padding-block: 8px;\n padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n pointer-events: none;\n user-select: none;\n }\n\n .combobox__group-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .combobox__group-prefix {\n flex-shrink: 0;\n color: inherit;\n }\n\n /* ── Help / Error ── */\n\n .form-control__help-text {\n display: none;\n }\n\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 font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAutBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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\nexport const styles = css`\n :host {\n display: block;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n /* ── Form control ── */\n\n .form-control .form-control__label {\n display: none;\n }\n\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-md));\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 :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* ── Popup ── */\n\n .combobox-popup {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .combobox-popup::part(popup) {\n z-index: 9999;\n }\n\n .combobox-popup[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .combobox-popup[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* ── Trigger: outer row that never scrolls ── */\n\n .combobox__trigger {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n position: relative;\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 cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\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: none;\n }\n\n .combobox__trigger:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n }\n\n .combobox--open .combobox__trigger,\n .combobox--focused .combobox__trigger {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .combobox--disabled .combobox__trigger {\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-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n user-select: none;\n }\n\n .combobox--warning .combobox__trigger {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .combobox--error .combobox__trigger {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .combobox--success .combobox__trigger {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Size: small */\n .combobox--small .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n min-height: var(--nile-height-32px, var(--ng-height-32px));\n }\n\n /* Size: medium */\n .combobox--medium .combobox__trigger {\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 padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n min-height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n /* Size: large */\n .combobox--large .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n min-height: var(--nile-height-48px, var(--ng-height-48px));\n }\n\n .combobox--pill .combobox__trigger {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n .combobox--filled .combobox__trigger {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .combobox--filled.combobox--open .combobox__trigger,\n .combobox--filled.combobox--focused .combobox__trigger {\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* ── Inner area: holds tags + input ── */\n\n .combobox__scroll-area {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n overflow: hidden;\n }\n\n /* Single-line: horizontal scroll for overflowing tags */\n .combobox__scroll-area--single-line {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar {\n height: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n /* Wrap: tags flow to multiple lines, trigger grows in height */\n .combobox__scroll-area--wrap {\n flex-wrap: wrap;\n overflow: visible;\n }\n\n /* ── Tags inside the scroll area ── */\n\n .combobox__scroll-area nile-tag {\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .combobox--disabled .combobox__scroll-area nile-tag {\n cursor: not-allowed;\n }\n\n .combobox__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-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* ── Input wrapper inside scroll area ── */\n\n .combobox__input-wrapper {\n flex: 1;\n min-width: 60px;\n display: flex;\n align-items: center;\n }\n\n .combobox__input {\n width: 100%;\n font: inherit;\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: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: inherit;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-overflow: ellipsis;\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n }\n\n .combobox__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 }\n\n .combobox__input:focus {\n outline: none;\n }\n\n .combobox--disabled .combobox__input {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* ── Hidden form value input ── */\n\n .combobox__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n /* ── Action icons (clear, expand) ── */\n\n .combobox__actions {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n margin-inline-start: auto;\n }\n\n .combobox__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n transition: 150ms color;\n }\n\n .combobox__clear:hover {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__clear:focus {\n outline: none;\n }\n\n .combobox__expand-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: 250ms rotate ease;\n rotate: 0;\n }\n\n .combobox--open .combobox__expand-icon {\n rotate: -180deg;\n }\n\n /* ── Prefix / suffix ── */\n\n .combobox__prefix,\n .combobox__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .combobox__prefix {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n /* ── Listbox (dropdown) ── */\n\n .combobox__listbox {\n display: flex;\n flex-direction: column;\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-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding: 0;\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */\n box-sizing: border-box;\n }\n\n .combobox__options-scroll {\n overflow-y: auto;\n flex: 0 1 auto;\n min-height: 0;\n }\n\n /* ── Options ── */\n\n .combobox__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n display: block;\n position: relative;\n width: 100%;\n padding-bottom: 0;\n box-sizing: border-box;\n }\n\n .combobox__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\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-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n }\n\n .combobox__no-results-title {\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n }\n\n .combobox__no-results-subtitle {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* ── Options (both virtual and plain) ── */\n\n .combobox__options nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__options nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));\n }\n\n .combobox__options nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .combobox__options-plain {\n display: flex;\n flex-direction: column;\n }\n\n .combobox__options-plain nile-option {\n flex-shrink: 0;\n }\n\n /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n .combobox__top-actions {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n user-select: none;\n }\n\n .combobox__top-actions--disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n\n .combobox__select-all {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n cursor: pointer;\n flex: 1 1 auto;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__show-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n border: none;\n background: none;\n padding: 0;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n cursor: pointer;\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 line-height: 14px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n }\n\n .combobox__show-toggle[disabled] {\n color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n cursor: not-allowed;\n }\n\n /* ── Footer ── */\n\n .combobox__footer {\n flex-shrink: 0;\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-primary));\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);\n margin-top: 0;\n }\n\n .combobox__footer.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__footer-clear {\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\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 letter-spacing: 0.2px;\n }\n\n .combobox__footer-clear:hover {\n text-decoration: underline;\n }\n\n /* ── Loader ── */\n\n .combobox__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .combobox__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: combobox-spin 0.6s linear infinite;\n }\n\n .combobox__loader--center {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n @keyframes combobox-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .combobox__add-option::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n /* ── Grid layout ── */\n\n :host([grid-columns]) .combobox__options-scroll {\n overflow-y: auto;\n }\n\n .combobox__grid-row {\n width: 100%;\n }\n\n .combobox__grid-row nile-option {\n min-width: 0;\n overflow: hidden;\n }\n\n .combobox__grid-row nile-option::part(base) {\n border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n }\n\n /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n .combobox__listbox.combobox__listbox--bidirectional {\n max-width: none;\n }\n\n .combobox__listbox--bidirectional .combobox__options-scroll {\n overflow: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--bidirectional .combobox__options {\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__listbox--bidirectional .combobox__grid-row {\n width: max-content;\n min-width: 100%;\n }\n\n /* ── Horizontal grid layout ── */\n\n .combobox__listbox.combobox__listbox--horizontal {\n overflow-x: auto;\n overflow-y: hidden;\n max-height: none;\n max-width: none;\n width: 100%;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar {\n height: 6px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .combobox__options--horizontal {\n display: block;\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__grid-col {\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-primary));\n }\n\n .combobox__grid-col:last-child {\n border-right: none;\n }\n\n .combobox__grid-col nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__grid-col nile-option::part(base) {\n border-radius: 0;\n }\n\n /* ── Group headers (data-driven grouping) ── */\n\n /* Plain (non-virtualized) listbox: sticky relative to the scroll container.\n * Activated only when the host has [sticky-group-header]. */\n :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {\n position: sticky;\n top: calc(var(--group-depth, 0) * 28px);\n z-index: 1;\n }\n\n /* Virtualized listbox: each row is absolutely positioned by the virtualizer.\n * Sticky doesn't pin against the scroll container because the row wrapper's\n * transform creates a containing block. Instead we render a separate\n * overlay inside the listbox that mirrors the currently-active group\n * header (computed on scroll). */\n .combobox__group-header-slot {\n pointer-events: none;\n z-index: 3;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n .combobox__group-header-slot .combobox__group-header {\n height: 100%;\n box-sizing: border-box;\n }\n\n .combobox__group-sticky-overlay {\n position: sticky;\n top: 0;\n z-index: 2;\n pointer-events: none;\n height: 32px;\n overflow: hidden;\n }\n .combobox__group-sticky-overlay .combobox__group-header {\n box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n }\n\n .combobox__group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n /* Match the listbox's natural inline padding so the header sits like a\n * section divider, edge-to-edge with options. Nested groups indent by\n * depth. Override with --combobox-group-header-indent if needed. */\n padding-block: 8px;\n padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n pointer-events: none;\n user-select: none;\n }\n\n .combobox__group-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .combobox__group-prefix {\n flex-shrink: 0;\n color: inherit;\n }\n\n /* ── Help / Error ── */\n\n .form-control__help-text {\n display: none;\n }\n\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 font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -56,7 +56,7 @@ export const styles = css `
|
|
|
56
56
|
max-height: var(--max-height);
|
|
57
57
|
overflow: hidden;
|
|
58
58
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
59
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
59
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
60
60
|
border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
|
|
61
61
|
box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
|
|
62
62
|
}
|
|
@@ -71,7 +71,7 @@ export const styles = css `
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
73
73
|
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
74
|
-
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
74
|
+
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.command__search-icon {
|
|
@@ -110,7 +110,7 @@ export const styles = css `
|
|
|
110
110
|
flex-wrap: wrap;
|
|
111
111
|
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
112
112
|
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
113
|
-
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
113
|
+
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.command__scopes-label {
|
|
@@ -152,7 +152,7 @@ export const styles = css `
|
|
|
152
152
|
align-items: center;
|
|
153
153
|
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
154
154
|
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
155
|
-
border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
155
|
+
border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
156
156
|
font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
|
|
157
157
|
color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
|
|
158
158
|
}
|
|
@@ -182,7 +182,7 @@ export const styles = css `
|
|
|
182
182
|
height: 20px;
|
|
183
183
|
padding: 0 5px;
|
|
184
184
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
185
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
185
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
186
186
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
187
187
|
font-family: inherit;
|
|
188
188
|
font-size: 11px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-command-menu.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu/nile-command-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,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 * CommandMenu CSS\n */\nexport const styles = css`\n :host {\n --width: 640px;\n --max-height: 480px;\n\n display: contents;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n .command {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .command[hidden] {\n display: none;\n }\n\n .command__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));\n }\n\n .command__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: var(--width);\n max-height: var(--max-height);\n overflow: hidden;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
1
|
+
{"version":3,"file":"nile-command-menu.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu/nile-command-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,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 * CommandMenu CSS\n */\nexport const styles = css`\n :host {\n --width: 640px;\n --max-height: 480px;\n\n display: contents;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n .command {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .command[hidden] {\n display: none;\n }\n\n .command__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));\n }\n\n .command__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: var(--width);\n max-height: var(--max-height);\n overflow: hidden;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-lg, var(--ng-radius-xl));\n box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));\n }\n\n .command__panel:focus {\n outline: none;\n }\n\n /* Search header */\n .command__header {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n }\n\n .command__search-icon {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .command__search-icon nile-glyph {\n width: 20px;\n height: 20px;\n }\n\n .command__input {\n flex: 1 1 auto;\n min-width: 0;\n border: none;\n outline: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .command__input::placeholder {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n }\n\n /* \"Searching for\" scopes row */\n .command__scopes {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n }\n\n .command__scopes-label {\n flex: 0 0 auto;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command__scopes-tags {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n /* Scrollable results list */\n .command__list {\n flex: 1 1 auto;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .command__empty {\n display: none;\n padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n text-align: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command__empty--visible {\n display: block;\n }\n\n /* Footer */\n .command__footer {\n display: none;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command--has-footer .command__footer {\n display: flex;\n }\n\n /* Built-in keyboard-hint row (footer slot fallback) */\n .command__hints {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .command__hint {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .command__footer kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n font-family: inherit;\n font-size: 11px;\n line-height: 1;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -55,7 +55,7 @@ export const styles = css `
|
|
|
55
55
|
/* Active / selected (keyboard or hover) */
|
|
56
56
|
:host([active]:not([disabled])) .item,
|
|
57
57
|
.item:hover {
|
|
58
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
58
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
|
|
59
59
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -114,7 +114,7 @@ export const styles = css `
|
|
|
114
114
|
height: 20px;
|
|
115
115
|
padding: 0 5px;
|
|
116
116
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
117
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
117
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
118
118
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
119
119
|
font-family: inherit;
|
|
120
120
|
font-size: 11px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-command-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu-item/nile-command-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,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 * CommandMenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 100%;\n margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n border-radius: var(--nile-radius-md, var(--ng-radius-md));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n transition: background-color 200ms ease, color 200ms ease;\n }\n\n /* size variants — small (default) vs medium */\n :host([size='medium']) .item {\n padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n /* Active / selected (keyboard or hover) */\n :host([active]:not([disabled])) .item,\n .item:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
1
|
+
{"version":3,"file":"nile-command-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu-item/nile-command-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,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 * CommandMenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 100%;\n margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n border-radius: var(--nile-radius-md, var(--ng-radius-md));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n transition: background-color 200ms ease, color 200ms ease;\n }\n\n /* size variants — small (default) vs medium */\n :host([size='medium']) .item {\n padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n /* Active / selected (keyboard or hover) */\n :host([active]:not([disabled])) .item,\n .item:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n :host([disabled]) .item {\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: none;\n }\n\n .item__icon {\n flex: 0 0 auto;\n /* Reserve a fixed icon gutter so items with and without a leading icon\n keep their labels aligned. */\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .item__icon::slotted(*) {\n width: 20px;\n height: 20px;\n }\n\n .item__label {\n flex: 1 1 auto;\n min-width: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item__suffix {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .item__shortcut {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .item__shortcut kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n font-family: inherit;\n font-size: 11px;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 1;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -49,7 +49,7 @@ export const styles = css `
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.option--hover:not(.option--current):not(.option--disabled) {
|
|
52
|
-
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-
|
|
52
|
+
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
|
|
53
53
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
54
54
|
border-radius: var(--nile-radius-none, var(--ng-radius-sm));
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxB,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 * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\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-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n :host([groupName]:not([groupName=''])) .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-
|
|
1
|
+
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxB,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 * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\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-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n :host([groupName]:not([groupName=''])) .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -233,35 +233,23 @@ export const styles = css `
|
|
|
233
233
|
display: contents;
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
.select__tags nile-tag {
|
|
236
|
+
:host([showtooltip]) .select__tags nile-tag {
|
|
237
237
|
flex: 0 1 auto;
|
|
238
238
|
cursor: pointer;
|
|
239
239
|
min-width: 0;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
/* A chip is capped - and so truncated - only when a tooltip can reveal the
|
|
243
|
-
full value. Without one it keeps its natural width and the fit pass moves
|
|
244
|
-
the surplus into the +N button instead. */
|
|
245
|
-
:host([showtooltip]) .select__tags nile-tag {
|
|
246
240
|
max-width: var(--nile-width-180px, var(--ng-height-180px));
|
|
247
241
|
}
|
|
248
242
|
|
|
249
|
-
|
|
250
|
-
can a chip refuse to shrink. */
|
|
251
|
-
:host(:not([showtooltip])) .select__tags--fitted nile-tag {
|
|
252
|
-
flex-shrink: 0;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.select__tags nile-tag::part(base) {
|
|
243
|
+
:host([showtooltip]) .select__tags nile-tag::part(base) {
|
|
256
244
|
max-width: 100%;
|
|
257
245
|
}
|
|
258
246
|
|
|
259
|
-
.select__tags nile-tag::part(prefix_content_wrapper) {
|
|
247
|
+
:host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {
|
|
260
248
|
flex: 1 1 auto;
|
|
261
249
|
min-width: 0;
|
|
262
250
|
}
|
|
263
251
|
|
|
264
|
-
.select__tags nile-tag::part(content) {
|
|
252
|
+
:host([showtooltip]) .select__tags nile-tag::part(content) {
|
|
265
253
|
display: block;
|
|
266
254
|
flex: 1 1 auto;
|
|
267
255
|
min-width: 0;
|
|
@@ -277,7 +265,7 @@ export const styles = css `
|
|
|
277
265
|
text-overflow: ellipsis;
|
|
278
266
|
}
|
|
279
267
|
|
|
280
|
-
.select__tags nile-tag::part(remove-button) {
|
|
268
|
+
:host([showtooltip]) .select__tags nile-tag::part(remove-button) {
|
|
281
269
|
flex: 0 0 auto;
|
|
282
270
|
}
|
|
283
271
|
|
|
@@ -297,7 +285,7 @@ export const styles = css `
|
|
|
297
285
|
white-space: nowrap;
|
|
298
286
|
cursor: pointer;
|
|
299
287
|
border: 1px dashed
|
|
300
|
-
var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
288
|
+
var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
301
289
|
border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
|
|
302
290
|
}
|
|
303
291
|
|
|
@@ -365,12 +353,12 @@ export const styles = css `
|
|
|
365
353
|
/* Filled selects */
|
|
366
354
|
.select--filled .select__combobox {
|
|
367
355
|
border: none;
|
|
368
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
356
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
369
357
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
370
358
|
}
|
|
371
359
|
|
|
372
360
|
.select--filled:hover:not(.select--disabled) .select__combobox {
|
|
373
|
-
background-color: var(--nile-colors-neutral-100);
|
|
361
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
|
|
374
362
|
}
|
|
375
363
|
|
|
376
364
|
.select--filled.select--disabled .select__combobox {
|
|
@@ -381,7 +369,7 @@ export const styles = css `
|
|
|
381
369
|
|
|
382
370
|
.select--filled:not(.select--disabled).select--open .select__combobox,
|
|
383
371
|
.select--filled:not(.select--disabled).select--focused .select__combobox {
|
|
384
|
-
background-color: var(--nile-colors-neutral-100);
|
|
372
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
385
373
|
outline: 3px solid rgba(0, 89, 255, 0.4);
|
|
386
374
|
}
|
|
387
375
|
|
|
@@ -484,7 +472,7 @@ export const styles = css `
|
|
|
484
472
|
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
|
|
485
473
|
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
486
474
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
487
|
-
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
475
|
+
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
488
476
|
border-radius: var(--nile-radius-sm, var(--ng-radius-md));
|
|
489
477
|
padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
490
478
|
padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
@@ -533,13 +521,16 @@ export const styles = css `
|
|
|
533
521
|
bottom: 0;
|
|
534
522
|
z-index: 1;
|
|
535
523
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.select__pre-footer-area--query {
|
|
536
527
|
container-type: inline-size;
|
|
537
528
|
container-name: nile-select-footer;
|
|
538
529
|
}
|
|
539
530
|
|
|
540
531
|
.select__custom-footer {
|
|
541
532
|
display: block;
|
|
542
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
533
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
543
534
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
544
535
|
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) ;
|
|
545
536
|
}
|
|
@@ -554,7 +545,7 @@ export const styles = css `
|
|
|
554
545
|
position: sticky;
|
|
555
546
|
bottom: 0px;
|
|
556
547
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
557
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
548
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
558
549
|
height: 15px;
|
|
559
550
|
/* Auto layout */
|
|
560
551
|
display: var(--nile-display-flex, var(--ng-display-flex));
|
|
@@ -638,6 +629,10 @@ export const styles = css `
|
|
|
638
629
|
}
|
|
639
630
|
}
|
|
640
631
|
|
|
632
|
+
.select__invisible {
|
|
633
|
+
opacity: 0;
|
|
634
|
+
}
|
|
635
|
+
|
|
641
636
|
.select__prefix--from-options {
|
|
642
637
|
margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
|
|
643
638
|
}
|
|
@@ -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-primary));\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-primary));\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, var(--ng-colors-bg-primary-hover));\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, var(--ng-colors-bg-primary));\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-primary));\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-primary));\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-primary));\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"]}
|