@six-group/ui-library 0.0.0-insider.48b1a71 → 0.0.0-insider.49fbab2

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", { key: 'f4b3cb516ce1b70a834903c00a56ca7edf5364dc', class: "six-root" }, h("header", { key: '88ec66c2af58e55621563f600cb8c1589467218c', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: '072a0e92b9203149a9823fdf83aa45b39494559f', name: "header" })), h("nav", { key: '58d18ca9b9ebf9db5981b3c82cce657f73ef5f13', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '62643ef967da9d303380b4d4d26ec5e026a86ac3', name: "left-sidebar" })), h("main", { key: '0b059f2814c4485dd03a3a166529d78999baa699', part: "main" }, h("div", { key: '74ce003ff9d45945b9bdc43b170c99300856544b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5ea05c471c96fd47cf27749accd1c551f16d69d2', name: "main" })), h("div", { key: '5dd7796754df4238f61f1ee8cc3cee9589f1f40f', class: "six-root__footer" }, h("slot", { key: '5c4036b9fb4d36f69b617a2e6ee7fce62c80fa08', name: "footer" }))), h("nav", { key: '36c76008c9dc36b7fef9f8a6a79e6508d1764ede', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '66cdae8a60d251063e4c8a710a36d0be07dedf0e', 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,6DAAM,KAAK,EAAC,UAAU;YACpB,+DAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;YACN,6DAAM,IAAI,EAAC,MAAM;gBACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,6DAAM,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-search-field/six-search-field.js

@@ -42,7 +42,7 @@ export class SixSearchField {
         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)));
+        return (h("div", { key: 'f1a0e877abffb212e7876237a294256446ce9414', class: "search-box" }, h("six-input", { key: '371999a3d7a5063f1b29494763444bdb20317146', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '8c9c517d8f6bbf45beae6c5af88a5b17967401b5', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'f45bb3a2c075675f2216a17e2c28329196685f2e' })));
     }
     static get is() { return "six-search-field"; }
     static get encapsulation() { return "shadow"; }

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;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;QACH,CAAC,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;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;gBACjC,mBAAmB;gBACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;YACrB,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;gBAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD;YACZ,eAAQ,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"]}
+{"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 {
@@ -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;
 }