@triptease/tt-combobox 5.7.2 → 5.7.3
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/dist/cjs/src/styles.js
CHANGED
|
@@ -157,7 +157,7 @@ exports.styles = (0, lit_1.css) `
|
|
|
157
157
|
left: var(--tt-combobox-left, 0);
|
|
158
158
|
right: var(--tt-combobox-right, unset);
|
|
159
159
|
bottom: var(--tt-combobox-bottom, unset);
|
|
160
|
-
z-index:
|
|
160
|
+
z-index: 999;
|
|
161
161
|
margin: 0;
|
|
162
162
|
list-style: none;
|
|
163
163
|
max-height: var(--tt-combobox-max-height, 400px);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index:
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 999;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
|
package/dist/esm/src/styles.js
CHANGED
|
@@ -154,7 +154,7 @@ export const styles = css `
|
|
|
154
154
|
left: var(--tt-combobox-left, 0);
|
|
155
155
|
right: var(--tt-combobox-right, unset);
|
|
156
156
|
bottom: var(--tt-combobox-bottom, unset);
|
|
157
|
-
z-index:
|
|
157
|
+
z-index: 999;
|
|
158
158
|
margin: 0;
|
|
159
159
|
list-style: none;
|
|
160
160
|
max-height: var(--tt-combobox-max-height, 400px);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index:
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 999;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
|