@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.ec3ffc2

package/dist/collection/components/six-search-field/six-search-field.js

@@ -8,176 +8,176 @@ import { EventListeners } from "../../utils/event-listeners";
  * @slot - Used to define the results below the search component.
  */
 export class SixSearchField {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    this.handleInputChange = () => {
-      if (this.inputElement != null) {
-        this.searchFieldChange.emit({ value: this.inputElement.value });
-      }
-    };
-    this.placeholder = undefined;
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.disabled = false;
-    this.value = '';
-    this.clearable = false;
-  }
-  handleValueChange() {
-    if (this.inputElement != null) {
-      this.inputElement.value = this.value;
-    }
-  }
-  componentDidLoad() {
-    if (this.inputElement == null)
-      return;
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
-    this.eventListeners.add(this.inputElement, 'keydown', (event) => {
-      const keyboardEvent = event;
-      if (keyboardEvent.key === 'Enter') {
-        // emit immediately
-        this.handleInputChange();
-      }
-    });
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    return (h("div", { class: "search-box" }, h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", null)));
-  }
-  static get is() { return "six-search-field"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-search-field.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-search-field.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's placeholder text."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "debounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Debounce time in milliseconds, default is 300 ms"
-        },
-        "attribute": "debounce",
-        "reflect": true,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the input."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's value attribute."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to add a clear button when the input is populated."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "searchFieldChange",
-        "name": "six-search-field-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a search is triggered"
-        },
-        "complexType": {
-          "original": "SixSearchFieldChangePayload",
-          "resolved": "SixSearchFieldChangePayload",
-          "references": {
-            "SixSearchFieldChangePayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx",
-              "id": "src/components/six-search-field/six-search-field.tsx::SixSearchFieldChangePayload"
+    constructor() {
+        this.eventListeners = new EventListeners();
+        this.handleInputChange = () => {
+            if (this.inputElement != null) {
+                this.searchFieldChange.emit({ value: this.inputElement.value });
             }
-          }
+        };
+        this.placeholder = undefined;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this.disabled = false;
+        this.value = '';
+        this.clearable = false;
+    }
+    handleValueChange() {
+        if (this.inputElement != null) {
+            this.inputElement.value = this.value;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }];
-  }
+    }
+    componentDidLoad() {
+        if (this.inputElement == null)
+            return;
+        this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+        this.eventListeners.add(this.inputElement, 'keydown', (event) => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === 'Enter') {
+                // emit immediately
+                this.handleInputChange();
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    render() {
+        return (h("div", { key: '108d928d1c28a1a37c0a6f00661e44ff921a7434', class: "search-box" }, h("six-input", { key: 'bd4002eab9d4077b70b0f3e730127a8cadad1d63', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '900c6d660cf833c2a3068e608c947694e6b95ff6', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '7f834e95d2cbb6207c4a580099e6f62240cb587f' })));
+    }
+    static get is() { return "six-search-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-search-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-search-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's placeholder text."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce time in milliseconds, default is 300 ms"
+                },
+                "attribute": "debounce",
+                "reflect": true,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the input."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's value attribute."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a clear button when the input is populated."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "searchFieldChange",
+                "name": "six-search-field-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a search is triggered"
+                },
+                "complexType": {
+                    "original": "SixSearchFieldChangePayload",
+                    "resolved": "SixSearchFieldChangePayload",
+                    "references": {
+                        "SixSearchFieldChangePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-search-field/six-search-field.tsx",
+                            "id": "src/components/six-search-field/six-search-field.tsx::SixSearchFieldChangePayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-search-field.js.map

package/dist/collection/components/six-search-field/six-search-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-search-field.js","sourceRoot":"","sources":["../../../src/components/six-search-field/six-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAM7D;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;IACH,CAAC,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,EAAE,EAAE;MACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;QACjC,mBAAmB;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;MACrB,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;MACZ,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-search-field.js","sourceRoot":"","sources":["../../../src/components/six-search-field/six-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAM7D;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE,CAAC;gBAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;YAClE,CAAC;QACH,CAAC,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACvC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,EAAE,EAAE;YACrE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAClC,mBAAmB;gBACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,YAAY;YACrB,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBAEzB,iEAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;YACZ,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {
@@ -26,6 +26,9 @@
 .form-control--has-label .form-control__label__required::after {
   color: var(--six-color-danger-800);
   content: "*";
+  transform: scale(1.1);
+  margin-left: var(--six-spacing-xxx-small);
+  position: absolute;
 }
 .form-control--has-label.form-control--small .form-control__label {
   font-size: var(--six-input-label-font-size-small);
@@ -83,10 +86,7 @@
   color: var(--six-input-label-color);
 }
 
-:host {
-  display: block;
-}
-
+:host,
 .select {
   display: block;
 }
@@ -146,7 +146,6 @@
 .select--disabled .select__box:not(.select__box--line) {
   border-color: var(--six-input-border-color-disabled);
 }
-.select--disabled .select__tags,
 .select--disabled .select__clear {
   pointer-events: none;
 }
@@ -158,25 +157,30 @@
   border-color: var(--six-input-border-color-danger);
 }
 
-.select__label {
-  flex-shrink: 1;
-  flex-grow: 1;
+.display__values {
+  display: flex;
+  flex: 1 1 auto;
   align-items: center;
   user-select: none;
-  width: 0; /* needed for firefox because due to "white-space: nowrap" the default is set to max-content */
+  overflow: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-overflow: ellipsis;
 }
-.select__label::-webkit-scrollbar {
+.display__values::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
-.select__label--single {
+.display__values-values {
+  flex: 0 1 auto;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.display__values-and-counter {
+  display: flex;
+  overflow: hidden;
 }
 
 .select__clear {
@@ -196,22 +200,14 @@
   transform: rotate(-180deg);
 }
 
-.select--placeholder-visible .select__label {
+.placeholder {
   color: var(--six-input-placeholder-color);
 }
 
-.select--disabled.select--placeholder-visible .select__label {
+.select--disabled .placeholder {
   color: var(--six-input-placeholder-color-disabled);
 }
 
-.select__tags {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: left;
-  margin-left: var(--six-spacing-xx-small);
-}
-
 .select__hidden-select {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
@@ -239,8 +235,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--small .select__label {
-  margin: 0 var(--six-input-spacing-small);
+.select--small .display__values {
+  margin: 0 0 0 var(--six-input-spacing-small);
 }
 .select--small .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -248,16 +244,6 @@
 .select--small .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--small .select__tags {
-  padding-bottom: 2px;
-}
-.select--small .select__tags six-tag {
-  padding-top: 2px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--small.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--medium .select__box {
   border-radius: var(--six-input-border-radius-medium);
@@ -268,8 +254,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--medium .select__label {
-  margin: 0 var(--six-input-spacing-medium);
+.select--medium .display__values {
+  margin: 0 0 0 var(--six-input-spacing-medium);
 }
 .select--medium .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -277,16 +263,6 @@
 .select--medium .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--medium .select__tags {
-  padding-bottom: 3px;
-}
-.select--medium .select__tags six-tag {
-  padding-top: 3px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--medium.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--large .select__box {
   border-radius: var(--six-input-border-radius-large);
@@ -297,8 +273,8 @@
   border: none;
   border-bottom: solid var(--six-border-width) var(--six-input-border-color);
 }
-.select--large .select__label {
-  margin: 0 var(--six-input-spacing-large);
+.select--large .display__values {
+  margin: 0 0 0 var(--six-input-spacing-large);
 }
 .select--large .select__clear {
   margin-right: var(--six-spacing-xxx-small);
@@ -306,16 +282,6 @@
 .select--large .select__icon {
   margin-right: var(--six-spacing-x-small);
 }
-.select--large .select__tags {
-  padding-bottom: 4px;
-}
-.select--large .select__tags six-tag {
-  padding-top: 4px;
-  margin-right: var(--six-spacing-xx-small);
-}
-.select--large.select--has-tags .select__label {
-  margin-left: 0;
-}
 
 .select--pill.select--small .select__box {
   border-radius: var(--six-height-small);
@@ -328,11 +294,7 @@
 }
 
 .select__menu {
-  max-width: 50vw;
-  width: fit-content;
-}
-.select__menu--filtered {
-  width: 100% !important;
+  width: 100%;
 }
 .select__menu--hidden {
   display: none;
@@ -341,4 +303,33 @@
 six-icon-button::part(base) {
   padding-top: 0;
   padding-bottom: 0;
+}
+
+.selection-container--border {
+  border-bottom: solid var(--six-border-width) var(--six-menu-divider-color);
+  padding-top: var(--six-spacing-xx-small);
+  padding-bottom: var(--six-spacing-xx-small);
+}
+
+.display-value--hidden {
+  display: none;
+}
+
+.overflow-count {
+  color: var(--six-color-web-rock-600);
+  padding-left: var(--six-spacing-x-small);
+}
+
+.overflow-count-hidden {
+  display: none;
+}
+
+.separator--hidden {
+  display: none;
+}
+
+.select-all {
+  border-top: 1px solid var(--six-color-web-rock-300);
+  display: flex;
+  justify-content: end;
 }