@six-group/ui-library 0.0.0-insider.756155a → 0.0.0-insider.777a428

package/dist/collection/components/six-root/six-root.js

@@ -11,27 +11,12 @@ import { h } from "@stencil/core";
  */
 export class SixRoot {
     constructor() {
-        this.resizeObserver = new ResizeObserver(([host]) => {
-            const { width } = host.contentRect;
-            this.collapse = width < this.breakpoint;
-        });
-        this.breakpoint = 1024;
         this.padded = true;
         this.stage = null;
         this.version = '';
-        this.collapse = false;
-    }
-    handleCollapsed(collapsed) {
-        this.collapsedEvent.emit({ collapsed });
-    }
-    componentWillLoad() {
-        this.resizeObserver.observe(this.host);
-    }
-    disconnectedCallback() {
-        this.resizeObserver.disconnect();
     }
     render() {
-        return (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("set-attributes", { value: { open: !this.collapse } }, h("slot", { name: "left-sidebar" }))), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
+        return (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { name: "left-sidebar" })), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }
@@ -47,24 +32,6 @@ export class SixRoot {
     }
     static get properties() {
         return {
-            "breakpoint": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Breakpoint for smaller screens when the right sidebar is collapsed by default."
-                },
-                "attribute": "breakpoint",
-                "reflect": false,
-                "defaultValue": "1024"
-            },
             "padded": {
                 "type": "boolean",
                 "mutable": false,
@@ -127,41 +94,6 @@ export class SixRoot {
             }
         };
     }
-    static get states() {
-        return {
-            "collapse": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "collapsedEvent",
-                "name": "six-root-collapsed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when display size is updated."
-                },
-                "complexType": {
-                    "original": "SixRootCollapsedPayload",
-                    "resolved": "SixRootCollapsedPayload",
-                    "references": {
-                        "SixRootCollapsedPayload": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-root/six-root.tsx",
-                            "id": "src/components/six-root/six-root.tsx::SixRootCollapsedPayload"
-                        }
-                    }
-                }
-            }];
-    }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "collapse",
-                "methodName": "handleCollapsed"
-            }];
-    }
 }
 //# sourceMappingURL=six-root.js.map

package/dist/collection/components/six-root/six-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;QAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;YACrD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,CAAC,CAAC,CAAC;0BAnBkB,IAAI;sBAGR,IAAI;qBAGM,IAAI;uBAGb,EAAE;wBAKA,KAAK;;IAQzB,eAAe,CAAC,SAAkB;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;YACpB,cAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb;YACN,YAAM,IAAI,EAAC,MAAM;gBACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG5D;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,OAAO,CACL,YAAM,KAAK,EAAC,UAAU;YACpB,cAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB;YACN,YAAM,IAAI,EAAC,MAAM;gBACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <slot name=\"left-sidebar\" />\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-root/test/six-root.spec.js

@@ -1,10 +1,5 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixRoot } from "../six-root";
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
 describe('six-root', () => {
     it('renders', async () => {
         const page = await newSpecPage({
@@ -19,9 +14,7 @@ describe('six-root', () => {
               <slot name="header"></slot>
             </header>
             <nav class="six-root__left-sidebar" part="left-sidebar">
-              <set-attributes>
                 <slot name="left-sidebar"></slot>
-              </set-attributes>
             </nav>
             <main part="main">
               <div class="six-root__container six-root__container--padded" part="container">

package/dist/collection/components/six-root/test/six-root.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-root.spec.js","sourceRoot":"","sources":["../../../../src/components/six-root/test/six-root.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;IAC1D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;IAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;IACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRoot } from '../six-root';\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n  observe: jest.fn(),\n  unobserve: jest.fn(),\n  disconnect: jest.fn(),\n}));\n\ndescribe('six-root', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixRoot],\n      html: `<six-root></six-root>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-root>\n        <mock:shadow-root>\n          <host class=\"six-root\">\n            <header part=\"header\">\n              <slot name=\"header\"></slot>\n            </header>\n            <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n              <set-attributes>\n                <slot name=\"left-sidebar\"></slot>\n              </set-attributes>\n            </nav>\n            <main part=\"main\">\n              <div class=\"six-root__container six-root__container--padded\" part=\"container\">\n                <slot name=\"main\"></slot>\n              </div>\n              <div class=\"six-root__footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </main>\n            <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n              <slot name=\"right-sidebar\"></slot>\n            </nav>\n          </host>\n        </mock:shadow-root>\n      </six-root>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-root.spec.js","sourceRoot":"","sources":["../../../../src/components/six-root/test/six-root.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixRoot } from '../six-root';\n\ndescribe('six-root', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixRoot],\n      html: `<six-root></six-root>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-root>\n        <mock:shadow-root>\n          <host class=\"six-root\">\n            <header part=\"header\">\n              <slot name=\"header\"></slot>\n            </header>\n            <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n                <slot name=\"left-sidebar\"></slot>\n            </nav>\n            <main part=\"main\">\n              <div class=\"six-root__container six-root__container--padded\" part=\"container\">\n                <slot name=\"main\"></slot>\n              </div>\n              <div class=\"six-root__footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </main>\n            <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n              <slot name=\"right-sidebar\"></slot>\n            </nav>\n          </host>\n        </mock:shadow-root>\n      </six-root>\n    `);\n  });\n});\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {

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 {
@@ -86,10 +86,7 @@
   color: var(--six-input-label-color);
 }
 
-:host {
-  display: block;
-}
-
+:host,
 .select {
   display: block;
 }
@@ -149,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;
 }
@@ -161,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 {
@@ -199,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%);
@@ -242,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);
@@ -251,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);
@@ -271,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);
@@ -280,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);
@@ -300,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);
@@ -309,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);
@@ -331,11 +294,7 @@
 }
 
 .select__menu {
-  max-width: 50vw;
-  width: fit-content;
-}
-.select__menu--filtered {
-  width: 100% !important;
+  width: 100%;
 }
 .select__menu--hidden {
   display: none;
@@ -344,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;
 }