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

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

@@ -0,0 +1,432 @@
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
+export class SixRating {
+    constructor() {
+        /** The rating's name attribute. */
+        this.name = '';
+        /** The rating's value attribute. */
+        this.value = 0;
+        /** Set to true to disable the rating. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Maximum number of stars. Default is 5 */
+        this.max = 5;
+        /** Size of the stars */
+        this.size = 'medium';
+        /** If its readonly */
+        this.readonly = false;
+        /** The rating's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        // --
+        this.hasFocus = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.hoveredValue = this.value;
+        this.ratingId = `rating-${++SixRating.id}`;
+        this.labelId = `rating-label-${SixRating.id}`;
+        this.errorTextId = `input-error-text-${SixRating.id}`;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.el, 'label');
+            this.hasErrorSlot = hasSlot(this.el, 'error-text');
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit(this.value);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                if (this.hoveredValue > 0) {
+                    this.hoveredValue = this.hoveredValue - 1;
+                    this.value = this.hoveredValue;
+                }
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                if (this.hoveredValue < this.max) {
+                    this.hoveredValue = this.hoveredValue + 1;
+                }
+            }
+        };
+    }
+    handleValueChange() {
+        this.sixChange.emit(this.value);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    renderStars() {
+        return Array.from({ length: this.max }, (_, i) => {
+            const handleEvent = (event) => {
+                if (this.readonly || this.disabled) {
+                    return;
+                }
+                switch (event.type) {
+                    case 'mouseover':
+                        this.hoveredValue = i + 1;
+                        break;
+                    case 'mouseout':
+                        this.hoveredValue = this.value;
+                        break;
+                    case 'click':
+                        this.value = this.hoveredValue;
+                        break;
+                }
+            };
+            return (h("six-icon", { class: {
+                    'six-rating__star': true,
+                    'six-rating__star--filled': i < this.hoveredValue,
+                }, filled: true, size: this.size, onMouseOver: handleEvent, onMouseOut: handleEvent, onClick: handleEvent }, "star_rate"));
+        });
+    }
+    render() {
+        return (h(FormControl, { key: 'ca3de959a1ffb915f0102ca6baa4a43c799d67ec', inputId: this.ratingId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, helpText: this.helpText, hasErrorTextSlot: this.hasErrorSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'ef452485f9c3615f4caeaefce7f7034d7f64119f', part: "base", class: {
+                'six-rating': true,
+                'six-rating--readonly': this.readonly,
+                'six-rating--disabled': this.disabled,
+            }, role: "slider", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabindex: this.disabled ? '-1' : '0', onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }, this.renderStars(), h("input", { key: '187ec03d83c3b29fc5917a9abab324d40930b8f4', part: "input", id: this.ratingId, type: "hidden", max: this.max, min: 0, name: this.name, value: this.value, disabled: this.disabled, required: this.required, role: "slider", "aria-labelledby": this.labelId }))));
+    }
+    static get is() { return "six-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-rating.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's name attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's value attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the rating."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "attribute": "error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "attribute": "error-text-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of stars. Default is 5"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the stars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If its readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "attribute": "help-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating's help text. Alternatively, you can use the help-text slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasLabelSlot": {},
+            "hasErrorSlot": {},
+            "hoveredValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixBlur",
+                "name": "six-rating-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sixChange",
+                "name": "six-rating-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's checked state changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-rating-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+SixRating.id = 0;
+//# sourceMappingURL=six-rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-rating.js","sourceRoot":"","sources":["../../../src/components/six-rating/six-rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n@Component({\n  tag: 'six-rating',\n  styleUrl: 'six-rating.scss',\n  shadow: true,\n})\nexport class SixRating {\n  @Element() el!: HTMLSixRatingElement;\n\n  /** The rating's name attribute. */\n  @Prop() name = '';\n\n  /** The rating's value attribute. */\n  @Prop({ mutable: true }) value: number = 0;\n\n  /** Set to true to disable the rating. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label: string = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Maximum number of stars. Default is 5 */\n  @Prop() max: number = 5;\n\n  /** Size of the stars */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /** If its readonly */\n  @Prop() readonly: boolean = false;\n\n  /** The rating's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-rating-blur' }) sixBlur!: EventEmitter<number>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-rating-change' }) sixChange!: EventEmitter<number>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-rating-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  // --\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n  @State() hoveredValue = this.value;\n\n  private static id: number = 0;\n\n  private ratingId = `rating-${++SixRating.id}`;\n  private labelId = `rating-label-${SixRating.id}`;\n  private errorTextId = `input-error-text-${SixRating.id}`;\n\n  @Watch('value')\n  handleValueChange() {\n    this.sixChange.emit(this.value);\n  }\n\n  connectedCallback() {\n    this.el.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.el.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.el, 'label');\n    this.hasErrorSlot = hasSlot(this.el, 'error-text');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      if (this.hoveredValue > 0) {\n        this.hoveredValue = this.hoveredValue - 1;\n        this.value = this.hoveredValue;\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      if (this.hoveredValue < this.max) {\n        this.hoveredValue = this.hoveredValue + 1;\n      }\n    }\n  };\n\n  private renderStars() {\n    return Array.from({ length: this.max }, (_, i) => {\n      const handleEvent = (event: Event) => {\n        if (this.readonly || this.disabled) {\n          return;\n        }\n        switch (event.type) {\n          case 'mouseover':\n            this.hoveredValue = i + 1;\n            break;\n          case 'mouseout':\n            this.hoveredValue = this.value;\n            break;\n          case 'click':\n            this.value = this.hoveredValue;\n            break;\n        }\n      };\n\n      return (\n        <six-icon\n          class={{\n            'six-rating__star': true,\n            'six-rating__star--filled': i < this.hoveredValue,\n          }}\n          filled\n          size={this.size}\n          onMouseOver={handleEvent}\n          onMouseOut={handleEvent}\n          onClick={handleEvent}\n        >\n          star_rate\n        </six-icon>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.ratingId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        helpText={this.helpText}\n        hasErrorTextSlot={this.hasErrorSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            'six-rating': true,\n            'six-rating--readonly': this.readonly,\n            'six-rating--disabled': this.disabled,\n          }}\n          role=\"slider\"\n          aria-label={this.label}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabindex={this.disabled ? '-1' : '0'}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n        >\n          {this.renderStars()}\n\n          <input\n            part=\"input\"\n            id={this.ratingId}\n            type=\"hidden\"\n            max={this.max}\n            min={0}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            required={this.required}\n            role=\"slider\"\n            aria-labelledby={this.labelId}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -20,7 +20,7 @@ export class SixRoot {
         this.version = '';
     }
     render() {
-        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" }))));
+        return (h("host", { key: '574331a30ddbdff3fb37129ec8e46c873bc1832e', class: "six-root" }, h("header", { key: 'f70f24b925ba9a88156d46a6481f6ab3f415bdad', part: "header" }, this.stage && h("six-stage-indicator", { key: '4fe5f33c59e77fcd1cae71afa5ccdd227fbd3d74', stage: this.stage }, this.version), h("slot", { key: '92fcdbb991e5593d0f5e602a3dc72b3bc95ce415', name: "header" })), h("nav", { key: 'd26e8e840ae344dcda1e81879e50f45981ad0035', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'da2e4b7ea1338e68970364d279753b7dd9ce4716', name: "left-sidebar" })), h("main", { key: '13c283e1e1150c3a6f0cc76feed50889023c8bfc', part: "main" }, h("div", { key: '0fd0a46e4d68dc7af4f4444de6cbd0cb68e3098a', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5591878851514068d3ce5751af12fa86aa6449ca', name: "main" })), h("div", { key: 'fe14e87f84217215d03545b5094f462981124093', class: "six-root__footer" }, h("slot", { key: '44cd8020e7ba2ee5a4bfb50a8e9f46cac4c6010f', name: "footer" }))), h("nav", { key: 'a26ca2c92e7e0ef955bea7796270a5d64e9c1aec', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '8d72471d1f4e06722eed5042dd8e4a5f9141b403', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }

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

@@ -176,7 +176,7 @@ export class SixSidebar {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("host", { key: '38d2d55b73e862c71ef3912fac01f6abd43a3b7c', class: "six-sidebar" }, h("div", { key: 'b8a7a32d48016310f943b42d03f1c4a44ff5bca4', class: {
+        return (h("host", { key: '11810533a79d5685e6ab768f0fbc8d9594d44de4', class: "six-sidebar" }, h("div", { key: '6908b34bd6df174046145e9c4813278703e0d7cf', class: {
                 sidebar__container: true,
                 'sidebar--visible': this.isVisible,
                 'sidebar--open': this.open,
@@ -185,7 +185,7 @@ export class SixSidebar {
             }, style: {
                 width: this.width,
                 [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'a13e1cd44a68fa3ad15a94ccc56ec7c09f689e4c' }))));
+            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '31557fda47113669da4d999a54f0074b37daffc8' }))));
     }
     static get is() { return "six-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-sidebar-item/six-sidebar-item.js

@@ -18,11 +18,11 @@ export class SixSidebarItem {
     }
     render() {
         const Tag = this.href != null ? 'a' : 'div';
-        return (h(Tag, { key: 'd36654ad6af78000c79191da18b9af02d582dde1', class: {
+        return (h(Tag, { key: '968d681e125a0c399973cfa9d37ac5f9c269042f', class: {
                 'sidebar-item': true,
                 'sidebar-item--selected': this.selected,
                 'sidebar-item--disabled': this.disabled,
-            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: '8664269ee064fa6abd7529ddf92bfcd62e1fe83d', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: '528d1bd9d6b2e329292a90b7f21412f441dce27b' })));
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && h("six-icon", { key: 'cd6ecec3465b0aeb625d3f0d0e7f8f6a8e76a25f', class: "six-sidebar-item__icon" }, this.icon), h("slot", { key: 'a54998cb6bc27463ab2f9402736008a8767b8358' })));
     }
     static get is() { return "six-sidebar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -112,12 +112,12 @@ export class SixSwitch {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { key: 'a358f086b57322b8e3225f4775b09506e766c968', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '7b87b1d45026bb79c0c1ce5c0cf2e969ee0d0ca7', part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: 'fd6c9c888316e46623e92b779c2215888783413b', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'd7d5f569d8aea4f7203f7c0973cf212bd6bcfc60', part: "base", htmlFor: this.switchId, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled,
                 'switch--focused': this.hasFocus,
-            }, onMouseDown: this.handleMouseDown }, h("span", { key: '35bd92fabfb1b177a048789e9f0f9d68499b7bd0', part: "control", class: "switch__control" }, h("span", { key: '0c85de3b5d75b3d083554931a5648be5ba26f7fc', part: "thumb", class: "switch__thumb" }), h("input", { key: '5c807156b356962f347820301050cd096ba67330', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: '923235545aec3ccb5c04aec3316fd8e5a2d027e2', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: '53e2689b7efaac1a93954d02eb7d6b1cdadc8c73' })))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: '4043bb4abed6a44a360b5409b0e4ebd5929a719f', part: "control", class: "switch__control" }, h("span", { key: 'd93e868866ea81ae2c2832ddc6fdcb11c0b23679', part: "thumb", class: "switch__thumb" }), h("input", { key: '7e5cff86449295f36e85b221f8795f3df18808ae', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: 'c0823f84eb3a30c2e0fdfe5acb6f1390e2b389aa', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: 'aeb69e52fd37efab7ee8061d3c69bfab1c174933' })))));
     }
     static get is() { return "six-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class SixTab {
         const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '6b59af3a0794c9ea26b362fa1ea1c0d7513babea', id: this.host.id || this.componentId }, h("div", { key: '145b15cdb916d93ecb67a966fd558e37500db17c', part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '40b4042f28816b55ef585cf24570b64a44031863', id: this.host.id || this.componentId }, h("div", { key: 'e4e8ba43cf2e1384a421835fe1131ea411ac7a18', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -56,7 +56,7 @@ export class SixTab {
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '2a63428f882a98381746e578c98421cf7d065a16' }), this.closable && (h("six-icon-button", { key: 'dc0dbb47462d86dfae7b6806b667d6af69094f31', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '62bb67bb6a95d732e0961f349ada6f7d78a2e3a1', part: this.active ? 'active-tab-indicator' : '', class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '39b1a75c51726543e0371e2607c6aa9197483b34' }), this.closable && (h("six-icon-button", { key: 'b9b2468f19b875ea58292f9ed330b49cff084d7c', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'da5cf7175879826bfb96f52cd8aca427372e32e6', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

package/dist/collection/components/six-tab-panel/six-tab-panel.js

@@ -21,7 +21,7 @@ export class SixTabPanel {
     render() {
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '2a0ab4d655a8de97585c947099381c1fab61e858', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '7ee7661cd01b4390bea7981c4f3fad3e8bb0e6c0', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '21c8561d0a126ef557c1fa9660209f10b6cd7936' }))));
+        h(Host, { key: 'b4c54fb42d68a3462abbd78dda16b1738e81dc57', id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, h("div", { key: '734645855fb3a875a6a43e46383122ddad15bbb3', part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, h("slot", { key: '1a789d112f5a048ac36f9a7e70208c99fb66c6c9' }))));
     }
     static get is() { return "six-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class SixTag {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { key: '6d436b39d9a220ad7e764afb2a61db3c15052bd8', part: "base", class: {
+        return (h("span", { key: 'e8a2448511ebcfa91f9714c1e575679fca929310', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -65,7 +65,7 @@ export class SixTag {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { key: '12faec51f7e0ac427c47037b815564ff6509fa5b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '38d9b9a805f423491334d8c91463ec7f5c4a5460', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '1dce2aee10cb11b41ea4ff2a3691a7ed6050e3b9', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: 'd31750ec14c421b44ddc7a2f62db6dfd4ac19dd1', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: 'a8bffabc14f61bff5f499cd9324cb17497a6082b', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '28a60248833682018fa9f11be5d02372893645e5', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: 'd47d95687a69a4822575ac3219872a51f445441d', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: '477d12d125ff90d1cc0adb2bb62bf11bc6510927', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get is() { return "six-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,7 +179,7 @@ export class SixTextarea {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { key: 'e535cb9819c9f78361b451b106349d44aa13bc25', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '5cf703bd10753ce53474c724839745a24769f843', part: "base", class: {
+        return (h(FormControl, { key: '82dacccbeabf732b3d49738f0b5b9d725938014d', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '88ddaeed09431fd06608350652de1280e729d44d', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -194,7 +194,7 @@ export class SixTextarea {
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { key: '1a1fc11b8ae91f3c404670a05ea0cc9e0598fa80', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: '59838f0a6a739c7f6ed950f7ec73c228571e201a', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     static get is() { return "six-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,22 +55,22 @@ export class SixTile {
         this.handleSlotChange();
     }
     render() {
-        return (h("six-tooltip", { key: '8bab8c04079d331d563099673f512ae71d6f1286', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: '449bfabf58a6aeba71a1e0b755cf05c5e25b34fe', part: "base", class: {
+        return (h("six-tooltip", { key: '165474a4301eff8d60788826d0378f33640476f4', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'ae643873a589d648887ab54c614be1cae1e01a95', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, h("div", { key: '56d729edf7027563b7172f3f9b18345906e50dff', part: "header", class: "tile__header" }, h("six-icon-button", { key: '7cd9016baa63f562c3b1d0972b3b222c55f9f555', class: {
+            } }, h("div", { key: 'b1fc1fabbf6f853611c7e7401bc007ba23a80985', part: "header", class: "tile__header" }, h("six-icon-button", { key: '3c8241f94b14ddbc2aeded4a7471e003112850bf', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '2e6d7d3e708360a4018db6dab1daee7a13cd671b', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: '2e0d64a50d9064909c3a0f41a8d8052df6ce1941', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '84c53bc538cfedda0b1365cafb64c86feaf1d5f3', name: "icon" })), h("div", { key: '46e70b405a6d28c09bd6d3a2a9530fcb0415595c', part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '334757a44525044c0d7f78fccf55c9076267c4ff', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: 'ec0904b8125e608d4d1f5ebeeb1b1fd8f8202a18', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '5c4d950efc7de4268da7285024c0900066020c19', name: "icon" })), h("div", { key: '145edac16dcbf511d60d4f044bae7bdd397d939e', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (h("div", { key: '35774ca3faf7192113f5550375ff895a2873bc1f', class: {
+            } }, this.label && (h("div", { key: 'e11277aca9e4b1d30050f582fef25f4b77815bfd', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '8c1ce8e5e504e6d33f41c0a9f38862fdddd619b1', name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '39e4128ecdb2166b5fba7955a5370e59beae9801', name: "label" })))));
     }
     static get is() { return "six-tile"; }
     static get encapsulation() { return "shadow"; }