diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js index 482c446222..3ad36be392 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-chip.js @@ -5,7 +5,12 @@ */ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; -import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js'; + +registerStyles('vaadin-multi-select-combo-box-chip', multiSelectComboBoxChip, { + moduleId: 'vaadin-multi-select-combo-box-chip', +}); /** * An element used by `` to display selected items. @@ -54,32 +59,6 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) { static get template() { return html` -
[[label]]
`; diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.d.ts new file mode 100644 index 0000000000..3d832fa6fd --- /dev/null +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.d.ts @@ -0,0 +1,10 @@ +/** + * @license + * Copyright (c) 2021 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import type { CSSResult } from 'lit'; + +export const multiSelectComboBox: CSSResult; + +export const multiSelectComboBoxChip: CSSResult; diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.js new file mode 100644 index 0000000000..ce17a75322 --- /dev/null +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-styles.js @@ -0,0 +1,73 @@ +/** + * @license + * Copyright (c) 2021 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +export const multiSelectComboBox = css` + :host { + --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em); + --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px); + } + + #chips { + display: flex; + align-items: center; + } + + ::slotted(input) { + box-sizing: border-box; + flex: 1 0 var(--input-min-width); + } + + ::slotted([slot='chip']), + ::slotted([slot='overflow']) { + flex: 0 1 auto; + } + + ::slotted([slot='chip']) { + overflow: hidden; + } + + :host(:is([readonly], [disabled])) ::slotted(input) { + flex-grow: 0; + flex-basis: 0; + padding: 0; + } + + :host([auto-expand-vertically]) #chips { + display: contents; + } + + :host([auto-expand-horizontally]) [class$='container'] { + width: auto; + } +`; + +export const multiSelectComboBoxChip = css` + :host { + display: inline-flex; + align-items: center; + align-self: center; + white-space: nowrap; + box-sizing: border-box; + } + + [part='label'] { + overflow: hidden; + text-overflow: ellipsis; + } + + :host([hidden]), + :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] { + display: none !important; + } + + @media (forced-colors: active) { + :host { + outline: 1px solid; + outline-offset: -1px; + } + } +`; diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js index 071479d4bf..d899eb8e23 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js @@ -18,47 +18,8 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js import { InputController } from '@vaadin/field-base/src/input-controller.js'; import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js'; import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js'; -import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; - -const multiSelectComboBox = css` - :host { - --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em); - --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px); - } - - #chips { - display: flex; - align-items: center; - } - - ::slotted(input) { - box-sizing: border-box; - flex: 1 0 var(--input-min-width); - } - - ::slotted([slot='chip']), - ::slotted([slot='overflow']) { - flex: 0 1 auto; - } - - ::slotted([slot='chip']) { - overflow: hidden; - } - - :host(:is([readonly], [disabled])) ::slotted(input) { - flex-grow: 0; - flex-basis: 0; - padding: 0; - } - - :host([auto-expand-vertically]) #chips { - display: contents; - } - - :host([auto-expand-horizontally]) [class$='container'] { - width: auto; - } -`; +import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { multiSelectComboBox } from './vaadin-multi-select-combo-box-styles.js'; registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], { moduleId: 'vaadin-multi-select-combo-box-styles',