@six-group/ui-library 4.3.2 → 5.0.0-rc.1

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

@@ -11,12 +11,16 @@ import { h } from "@stencil/core";
  */
 export class SixRoot {
     constructor() {
+        /** Defines whether the content section should be padded */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.padded = true;
+        /** Defines the stage of the application*/
         this.stage = null;
+        /** Defines the version of the application*/
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'bb7825453e8962c4284fb6fbb4134c4b7767ffbd', class: "six-root" }, h("header", { key: '443e36e1fb8ab628ab2e1bde1eef3f3f0a6c9a3e', part: "header" }, this.stage && h("six-stage-indicator", { key: 'e10e1a45360e64f7319e15b5a615b898e41c5a6f', stage: this.stage }, this.version), h("slot", { key: '83f124f27a434c0eaab23e25c9690e63619d3238', name: "header" })), h("nav", { key: '52f47a0ea56ea73c01acfb974005b25a07f31c1c', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'dc394fd3eba205aae4bfff5a17f826e64d7aabcb', name: "left-sidebar" })), h("main", { key: '6bc11607edf2b772a2ae8e83aa6116d0996353f2', part: "main" }, h("div", { key: 'dce7d4f1ff72fdad0daf1ded16d6e91c709ea837', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '2f738b3b6705db8d0bfe07590df59cc4d243cad0', name: "main" })), h("div", { key: '005c723d6515ffc9a0acdc51460a4f51872ae717', class: "six-root__footer" }, h("slot", { key: '8cc3c97bc3c1a328ed4a99dfa1b17c6d3abb4607', name: "footer" }))), h("nav", { key: '05b12db2b51c4c4b5cb0de37c7f79d7e3220dda6', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '9c7977c0f58dc781acb189a816f5dc0cd61c8304', name: "right-sidebar" }))));
+        return (h("host", { key: '005ad5514d4137e97a862fd2a09151013e6250d0', class: "six-root" }, h("header", { key: '4cde9e57f125b9ea179608c36b311d33449ab9d3', part: "header" }, this.stage && h("six-stage-indicator", { key: '9c8d9ce4ae9d7652249fd3e2bbb39431830e6813', stage: this.stage }, this.version), h("slot", { key: 'dd414f2b13ec59e96ebe1e1df8f2fb71de113a60', name: "header" })), h("nav", { key: 'b9abf9d3eae12e6c492b64aada73bd7101a4edb1', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'd664769001501f55dd65a0c772fa6df6742ffe4c', name: "left-sidebar" })), h("main", { key: '4fb77beeed3e16ccb53a6d486d1307893d16aac3', part: "main" }, h("div", { key: '587d43eedf0a41c790b184c54f41941ea12fdd37', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '66473b0c3e44effb55ce262b27f2980b668b4335', name: "main" })), h("div", { key: 'b4dcc58d0fe42bcee91f2d0586e07f026b70bf5f', class: "six-root__footer" }, h("slot", { key: 'bf3efc6011d2cfbdd121973d77b7eba58c12c440', name: "footer" }))), h("nav", { key: '88683d098fd1c75bf35b9ecb9aaf2d2e1b8f6715', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3e38e0f3d3c0c66075c27f305d0460f52bbf725c', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }
@@ -34,6 +38,7 @@ export class SixRoot {
         return {
             "padded": {
                 "type": "boolean",
+                "attribute": "padded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -46,12 +51,14 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines whether the content section should be padded"
                 },
-                "attribute": "padded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "stage": {
                 "type": "string",
+                "attribute": "stage",
                 "mutable": false,
                 "complexType": {
                     "original": "StageType",
@@ -70,12 +77,14 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines the stage of the application"
                 },
-                "attribute": "stage",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
             },
             "version": {
                 "type": "string",
+                "attribute": "version",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -88,7 +97,8 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines the version of the application"
                 },
-                "attribute": "version",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             }

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,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,4EAAqB,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"]}
+{"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;IALpB;QAQE,2DAA2D;QAC3D,+DAA+D;QACvD,WAAM,GAAG,IAAI,CAAC;QAEtB,0CAA0C;QAClC,UAAK,GAAc,IAAI,CAAC;QAEhC,4CAA4C;QACpC,YAAO,GAAG,EAAE,CAAC;KA0BtB;IAxBC,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,UAAU;YACpB,+DAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,4EAAqB,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-search-field/six-search-field.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: block;
 }

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

@@ -9,17 +9,20 @@ import { EventListeners } from "../../utils/event-listeners";
  */
 export class SixSearchField {
     constructor() {
+        /** Debounce time in milliseconds, default is 300 ms */
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** The input's value attribute. */
+        this.value = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
         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) {
@@ -42,7 +45,7 @@ export class SixSearchField {
         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' })));
+        return (h("div", { key: '9172dbb88cc35be7390727842483a74241e1330f', class: "search-box" }, h("six-input", { key: '44c1d20960202129a19cb412bb67823ac927ad98', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'af8431bd85223a37fee7e17d51288313c4494fed', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '5d4f9bf280fc5fe215c268818b641753bb786869' })));
     }
     static get is() { return "six-search-field"; }
     static get encapsulation() { return "shadow"; }
@@ -60,6 +63,7 @@ export class SixSearchField {
         return {
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -72,11 +76,13 @@ export class SixSearchField {
                     "tags": [],
                     "text": "The input's placeholder text."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -89,12 +95,14 @@ export class SixSearchField {
                     "tags": [],
                     "text": "Debounce time in milliseconds, default is 300 ms"
                 },
-                "attribute": "debounce",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +115,14 @@ export class SixSearchField {
                     "tags": [],
                     "text": "Set to true to disable the input."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -125,12 +135,14 @@ export class SixSearchField {
                     "tags": [],
                     "text": "The input's value attribute."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -143,7 +155,8 @@ export class SixSearchField {
                     "tags": [],
                     "text": "Set to true to add a clear button when the input is populated."
                 },
-                "attribute": "clearable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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,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"]}
+{"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;IAL3B;QASE,uDAAuD;QAC9B,aAAQ,GAAG,qBAAqB,CAAC;QAE1D,wCAAwC;QACf,aAAQ,GAAG,KAAK,CAAC;QAE1C,mCAAmC;QACV,UAAK,GAAG,EAAE,CAAC;QAEpC,qEAAqE;QAC7D,cAAS,GAAG,KAAK,CAAC;QAOlB,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;KA4CH;IAzCC,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

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .form-control .form-control__label {
   display: none;
 }
@@ -208,16 +219,6 @@
   color: var(--six-input-placeholder-color-disabled);
 }
 
-.select__hidden-select {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .select__input {
   position: absolute;
   top: 0;