wcs-core 4.2.0 → 5.0.0

package/dist/collection/components/select/select-keyboard-event.js

@@ -0,0 +1,306 @@
+import { keyboardShortcutFromKeyboardEvent } from "../../utils/keyboard-event";
+/**
+ * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ * @param event
+ * @param currentState
+ * @param type
+ */
+export function getActionForKeyboardEvent(event, currentState, type) {
+  const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);
+  if (keyboardShortcut === 'UNKNOWN') {
+    return [];
+  }
+  switch (currentState) {
+    case "closed":
+      // We handle every available shortcut for the closed state
+      switch (keyboardShortcut) {
+        case "MAJ+TAB":
+          switch (type) {
+            case "unique":
+            case "multiple":
+              return [];
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We need to move focus to previous focusable element in order to ignore the wcs-select component
+              return [{ kind: 'MoveFocus', target: 'previous' }];
+            default:
+              break;
+          }
+          break;
+        case 'DOWN_ARROW':
+          switch (type) {
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'next' }];
+            case "autocomplete_multiple":
+            case "autocomplete_unique":
+              return [{ kind: 'OpenSelect' }, { kind: 'HighlightOption', target: 'first' }];
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+            default:
+              break;
+          }
+          break;
+        case 'RIGHT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // Do nothing, we navigate between characters inside input field
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'next' }];
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+            default:
+              break;
+          }
+          break;
+        case 'UP_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'HighlightOption', target: 'last' }];
+            case "multiple":
+              break;
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'previous' }];
+            default:
+              break;
+          }
+          break;
+        case 'LEFT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // Do nothing, we navigate between characters inside input field
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'previous' }];
+            case "multiple":
+              break;
+            default:
+              break;
+          }
+          break;
+        case 'ALT+DOWN_ARROW':
+        case 'ALT+UP_ARROW':
+          switch (type) {
+            case "unique":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'first' }];
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+            case "multiple":
+              return [{ kind: 'OpenSelect' }];
+            default:
+              break;
+          }
+          break;
+        case 'SPACE':
+        case 'ENTER':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'OpenSelect' }, { kind: 'FocusOption', target: 'lastFocused' }];
+            default:
+              break;
+          }
+          break;
+        case 'ESCAPE':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'ClearAutocompleteInput' }];
+            case 'unique':
+            case 'multiple':
+              return [];
+            default:
+              break;
+          }
+          break;
+        case 'PAGE_UP':
+          switch (type) {
+            case "autocomplete_unique":
+              return [];
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'first' }];
+            case "multiple":
+              return [];
+            default:
+              break;
+          }
+          break;
+        case 'PAGE_DOWN':
+          switch (type) {
+            case "autocomplete_unique":
+              return [];
+            case "autocomplete_multiple":
+              return [];
+            case "unique":
+              return [{ kind: 'SelectOption', target: 'last' }];
+            case "multiple":
+              return [];
+            default:
+              break;
+          }
+          break;
+        default:
+          break;
+      }
+      break;
+    case 'opened':
+      // We handle every available shortcut for the opened state
+      switch (keyboardShortcut) {
+        case 'ESCAPE':
+          switch (type) {
+            case 'unique':
+            case 'multiple':
+            case 'autocomplete_unique':
+            case 'autocomplete_multiple':
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+            default:
+              break;
+          }
+          break;
+        case 'ALT+UP_ARROW':
+          switch (type) {
+            case 'unique':
+            case 'multiple':
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+            case 'autocomplete_unique':
+            case 'autocomplete_multiple':
+              // We must keep select autocomplete opened
+              return [];
+            default:
+              break;
+          }
+          break;
+        case 'TAB':
+          switch (type) {
+            case "autocomplete_unique":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }, { kind: 'CloseSelect', shouldBlur: false }];
+            case "autocomplete_multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: false }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: true }];
+            default:
+              break;
+          }
+          break;
+        case 'MAJ+TAB':
+          switch (type) {
+            case "autocomplete_unique":
+              // We don't blur the select when we close it because we move the focus manually just after closing it.
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }, { kind: 'CloseSelect', shouldBlur: false }, { kind: 'MoveFocus', target: 'previous' }];
+            case "autocomplete_multiple":
+              // We don't blur the select when we close it because we move the focus manually just after closing it.
+              return [{ kind: 'CloseSelect', shouldBlur: false }, { kind: 'MoveFocus', target: 'previous' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'CloseSelect', shouldBlur: true }];
+            default:
+              break;
+          }
+          break;
+        case 'UP_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'previous' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'previous' }];
+            default:
+              break;
+          }
+          break;
+        case 'LEFT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We do nothing (navigate between characters in input field)
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'previous' }];
+            default:
+              break;
+          }
+          break;
+        case 'DOWN_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'next' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'next' }];
+            default:
+              break;
+          }
+          break;
+        case 'RIGHT_ARROW':
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              // We do nothing (navigate between characters in input field)
+              return [];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'next' }];
+            default:
+              break;
+          }
+          break;
+        case "PAGE_UP":
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'first' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'first' }];
+            default:
+              break;
+          }
+          break;
+        case "PAGE_DOWN":
+          switch (type) {
+            case "autocomplete_unique":
+            case "autocomplete_multiple":
+              return [{ kind: 'HighlightOption', target: 'last' }];
+            case "unique":
+            case "multiple":
+              return [{ kind: 'FocusOption', target: 'last' }];
+            default:
+              break;
+          }
+          break;
+        case "ENTER":
+          switch (type) {
+            case "autocomplete_unique":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }];
+            case "autocomplete_multiple":
+              return [{ kind: 'SelectOption', target: 'lastHighlighted' }];
+            case "unique":
+            case "multiple":
+              // Do nothing, let's select option emit an event
+              break;
+            default:
+              break;
+          }
+          break;
+        default:
+          break;
+      }
+      break;
+    default:
+      throw Error('Unknown error');
+  }
+  return [];
+}
+//# sourceMappingURL=select-keyboard-event.js.map

package/dist/collection/components/select/select-keyboard-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-keyboard-event.js","sourceRoot":"","sources":["../../../src/components/select/select-keyboard-event.ts"],"names":[],"mappings":"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","sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possibles Shortcut\n// ALT+DOWN_ARROW : open the listbox\n// ALT+UP_ARROW : open the listbox\n\n// MAJ+TAB : close the listbox, blur\n\n// UP_ARROW : focus / highlight the previous option\n// DOWN_ARROW : focus / highlight the next option\n// LEFT_ARROW : (unique) focus / highlight the previous option\n// RIGHT_ARROW : (unique) focus / highlight the previous option\n\n// HOME : select first option\n// END : select last option\n\n// PAGE_UP : select first option\n// PAGE_DOWN : select last option\n\n// ENTER : select currently focused / highlighted option\n// SPACE : select currently focused / highlighted option\n\n// TAB : close the listbox, blur\n// ESCAPE : close the listbox, if autocomplete mode also clears the textbox\n\nexport type KeyboardEventAssociatedAction = OpenSelect\n    | CloseSelect\n    | ClearAutocompleteInput\n    | ClearHighlight\n    | HighlightOption\n    | FocusOption\n    | MoveFocus\n    | SelectOption;\n\ntype OpenSelect = {kind: 'OpenSelect'};\ntype CloseSelect = {kind: 'CloseSelect', shouldBlur: boolean};\n\ntype ClearAutocompleteInput = {kind: 'ClearAutocompleteInput'};\n\ntype ClearHighlight = {kind: 'ClearHighlight'};\ntype HighlightOption = {kind: 'HighlightOption', target: 'next' | 'previous' | 'first' | 'last'};\n\ntype SelectOption = {kind: 'SelectOption', target: 'next' | 'previous' | 'first' | 'last' | 'lastHighlighted'};\n\ntype MoveFocus = {kind: 'MoveFocus', target: 'previous'};\n\ntype FocusOption = {kind: 'FocusOption', target: 'next' | 'previous' | 'first' | 'last' | 'lastFocused'};\n\n/**\n * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened', type: 'autocomplete_unique' | 'autocomplete_multiple' | 'unique' | 'multiple'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case \"closed\":\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case \"MAJ+TAB\":\n                    switch (type) {\n                        case \"unique\":\n                        case \"multiple\":\n                            return [];\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            // We need to move focus to previous focusable element in order to ignore the wcs-select component\n                            return [{kind: 'MoveFocus', target: 'previous'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'DOWN_ARROW':\n                    switch (type) {\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'next'}];\n                        case \"autocomplete_multiple\":\n                        case \"autocomplete_unique\":\n                            return [{kind: 'OpenSelect'}, {kind: 'HighlightOption', target: 'first'}];\n                        case \"multiple\":\n                            return [{kind: 'OpenSelect'}, {kind: 'FocusOption', target: 'first'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'RIGHT_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            // Do nothing, we navigate between characters inside input field\n                            return [];\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'next'}];\n                        case \"multiple\":\n                            return [{kind: 'OpenSelect'}, {kind: 'FocusOption', target: 'first'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'UP_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'OpenSelect'}, {kind: 'HighlightOption', target: 'last'}];\n                        case \"multiple\":\n                            break;\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'previous'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'LEFT_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            // Do nothing, we navigate between characters inside input field\n                            return [];\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'previous'}];\n                        case \"multiple\":\n                            break;\n                        default:\n                            break;\n                    }\n                    break;\n                case 'ALT+DOWN_ARROW':\n                case 'ALT+UP_ARROW':\n                    switch (type) {\n                        case \"unique\":\n                            return [{kind: 'OpenSelect'}, {kind: 'FocusOption', target: 'first'}]\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                        case \"multiple\":\n                            return [{kind: 'OpenSelect'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'SPACE':\n                case 'ENTER':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'OpenSelect'}, {kind: 'FocusOption', target: 'lastFocused'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'ESCAPE':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'ClearAutocompleteInput'}];\n                        case 'unique':\n                        case 'multiple':\n                            return [];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'PAGE_UP':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                            return [];\n                        case \"autocomplete_multiple\":\n                            return [];\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'first'}];\n                        case \"multiple\":\n                            return [];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'PAGE_DOWN':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                            return [];\n                        case \"autocomplete_multiple\":\n                            return [];\n                        case \"unique\":\n                            return [{kind: 'SelectOption', target: 'last'}];\n                        case \"multiple\":\n                            return [];\n                        default:\n                            break;\n                    }\n                    break;\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'ESCAPE':\n                    switch (type) {\n                        case 'unique':\n                        case 'multiple':\n                        case 'autocomplete_unique':\n                        case 'autocomplete_multiple':\n                            return [{kind: 'CloseSelect', shouldBlur: false}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'ALT+UP_ARROW':\n                    switch (type) {\n                        case 'unique':\n                        case 'multiple':\n                            return [{kind: 'CloseSelect', shouldBlur: false}];\n                        case 'autocomplete_unique':\n                        case 'autocomplete_multiple':\n                            // We must keep select autocomplete opened\n                            return [];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'TAB':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                            return [{kind: 'SelectOption', target: 'lastHighlighted'}, {kind: 'CloseSelect', shouldBlur: false}];\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'CloseSelect', shouldBlur: false}];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'CloseSelect', shouldBlur: true}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'MAJ+TAB':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                            // We don't blur the select when we close it because we move the focus manually just after closing it.\n                            return [{kind: 'SelectOption', target: 'lastHighlighted'}, {kind: 'CloseSelect', shouldBlur: false}, {kind: 'MoveFocus', target: 'previous'}];\n                        case \"autocomplete_multiple\":\n                            // We don't blur the select when we close it because we move the focus manually just after closing it.\n                            return [{kind: 'CloseSelect', shouldBlur: false}, {kind: 'MoveFocus', target: 'previous'}];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'CloseSelect', shouldBlur: true}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'UP_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'HighlightOption', target: 'previous'}]\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'previous'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'LEFT_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            // We do nothing (navigate between characters in input field)\n                            return [];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'previous'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'DOWN_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'HighlightOption', target: 'next'}]\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'next'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case 'RIGHT_ARROW':\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            // We do nothing (navigate between characters in input field)\n                            return [];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'next'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case \"PAGE_UP\":\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'HighlightOption', target: 'first'}];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'first'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case \"PAGE_DOWN\":\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'HighlightOption', target: 'last'}];\n                        case \"unique\":\n                        case \"multiple\":\n                            return [{kind: 'FocusOption', target: 'last'}];\n                        default:\n                            break;\n                    }\n                    break;\n                case \"ENTER\":\n                    switch (type) {\n                        case \"autocomplete_unique\":\n                            return [{kind: 'SelectOption', target: 'lastHighlighted'}];\n                        case \"autocomplete_multiple\":\n                            return [{kind: 'SelectOption', target: 'lastHighlighted'}];\n                        case \"unique\":\n                        case \"multiple\":\n                            // Do nothing, let's select option emit an event\n                            break;\n                        default:\n                            break;\n                    }\n                    break;\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n"]}

package/dist/collection/components/select/select.css

@@ -207,13 +207,9 @@
   display: block;
 }
 
-:host(:not(.expanded):focus) .wcs-select-control {
-  border: var(--wcs-primary) solid 1px;
-}
-
 :host(:not(.expanded):focus-visible) .wcs-select-control {
   outline: 2px dashed var(--wcs-primary);
-  outline-offset: 4px;
+  outline-offset: 0;
   border-radius: var(--wcs-select-border-radius);
 }
 
@@ -233,7 +229,7 @@
 }
 
 label {
-  padding-left: calc(var(--wcs-padding) - var(--wcs-select-border-width));
+  padding-left: calc(var(--wcs-padding) / 2 - var(--wcs-select-border-width));
   padding-right: calc(var(--wcs-padding) - var(--wcs-select-border-width));
   font-weight: 500;
   cursor: pointer;
@@ -247,18 +243,34 @@ label {
 :host([size=m]) {
   min-height: var(--wcs-size-m);
   --wcs-select-font-size: 1rem;
+  --wcs-internal-select-chip-size: calc(var(--wcs-size-s) - 2px);
 }
 :host([size=m]) .wcs-select-control {
   min-height: var(--wcs-size-m);
 }
+:host([size=m]):host([autocomplete]) .autocomplete-field {
+  height: calc(var(--wcs-size-s) - 2px);
+}
+:host([size=m]):host([autocomplete]) .wcs-select-value-container {
+  padding-top: calc((var(--wcs-size-m) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));
+  padding-bottom: calc((var(--wcs-size-m) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));
+}
 
 :host([size=l]) {
   min-height: var(--wcs-size-l);
   --wcs-select-font-size: 1.0625rem;
+  --wcs-internal-select-chip-size: var(--wcs-size-s);
 }
 :host([size=l]) .wcs-select-control {
   min-height: var(--wcs-size-l);
 }
+:host([size=l]):host([autocomplete]) .autocomplete-field {
+  height: var(--wcs-size-s);
+}
+:host([size=l]):host([autocomplete]) .wcs-select-value-container {
+  padding-top: calc((var(--wcs-size-l) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));
+  padding-bottom: calc((var(--wcs-size-l) - var(--wcs-internal-select-chip-size)) / 2 - var(--wcs-select-border-width));
+}
 
 :host([chips]) .wcs-select-control {
   flex-wrap: wrap;
@@ -392,6 +404,8 @@ label {
 }
 
 .wcs-select-chip {
+  box-sizing: border-box;
+  height: var(--wcs-internal-select-chip-size);
   line-height: 1.375;
   color: var(--wcs-contrast);
   background-color: var(--wcs-base);
@@ -400,6 +414,7 @@ label {
   align-items: center;
   padding: calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
   overflow: initial;
+  z-index: 1;
 }
 
 .wcs-select-options {
@@ -413,4 +428,42 @@ label {
   width: calc(100% - 2 * var(--wcs-select-border-width));
   background-color: var(--wcs-white);
   color: var(--wcs-text-medium);
+}
+
+:host([autocomplete]) .wcs-select-value-container {
+  margin: 0;
+  width: 100%;
+  padding-left: var(--wcs-padding-m);
+}
+:host([autocomplete]) input {
+  border-radius: var(--wcs-border-radius);
+  font: unset;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  padding: 0 var(--wcs-margin);
+  color: var(--wcs-primary);
+  font-weight: var(--wcs-font-weight-form-value) !important;
+  font-size: var(--wcs-select-font-size);
+  line-height: 1.5;
+}
+:host([autocomplete]) input:focus-within {
+  outline: 2px dashed var(--wcs-primary);
+  outline-offset: 0;
+  border-radius: var(--wcs-border-radius);
+}
+:host([autocomplete]) input::placeholder {
+  font-style: italic;
+  font-weight: 400;
+}
+
+.autocomplete-field {
+  width: 0;
+  min-width: 50px;
+  border-radius: var(--wcs-border-radius);
+  flex-grow: 1;
+}
+
+.noresult-container {
+  margin: var(--wcs-margin);
 }