@six-group/ui-library 4.0.4 → 4.1.1

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

@@ -17,188 +17,217 @@ import { getTextContent } from "../../utils/slot";
  * @part suffix - The suffix container.
  */
 export class SixMenuItem {
-  constructor() {
-    this.hasFocus = false;
-    this.checked = false;
-    this.value = '';
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-  }
-  /** Sets focus on the button. */
-  async setFocus(options) {
-    var _a;
-    (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  /** Removes focus from the button. */
-  async removeFocus() {
-    var _a;
-    (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return Promise.resolve(getTextContent(this.defaultSlot));
-  }
-  handleBlur() {
-    this.hasFocus = false;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-  }
-  handleMouseEnter() {
-    return this.setFocus();
-  }
-  handleMouseLeave() {
-    return this.removeFocus();
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
-        'menu-item': true,
-        'menu-item--checked': this.checked,
-        'menu-item--disabled': this.disabled,
-        'menu-item--focused': this.hasFocus,
-      }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { part: "prefix", class: "menu-item__prefix" }, h("slot", { name: "prefix" })), h("span", { part: "label", class: "menu-item__label" }, h("slot", { ref: (el) => (this.defaultSlot = el) })), h("span", { part: "suffix", class: "menu-item__suffix" }, h("slot", { name: "suffix" })), h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
-  }
-  static get is() { return "six-menu-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-menu-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-menu-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "checked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw the item in a checked state."
-        },
-        "attribute": "checked",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw the menu item in a disabled state."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {}
-    };
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    constructor() {
+        this.handleCheckboxChange = () => {
+            this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
+        };
+        this.hasFocus = false;
+        this.active = false;
+        this.checkType = 'check';
+        this.checked = false;
+        this.value = '';
+        this.disabled = false;
+    }
+    connectedCallback() {
+        this.handleBlur = this.handleBlur.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleMouseEnter = this.handleMouseEnter.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    }
+    /** Sets focus on the button. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the button. */
+    async removeFocus() {
+        var _a;
+        (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** Returns a text label based on the contents of the menu item's default slot. */
+    getTextLabel() {
+        return Promise.resolve(getTextContent(this.defaultSlot));
+    }
+    handleBlur() {
+        this.hasFocus = false;
+    }
+    handleFocus() {
+        this.hasFocus = true;
+    }
+    handleMouseEnter() {
+        this.active = true;
+    }
+    handleMouseLeave() {
+        this.active = false;
+        this.hasFocus = false;
+    }
+    render() {
+        return (h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
+                'menu-item': true,
+                'menu-item--checked': this.checked,
+                'menu-item--disabled': this.disabled,
+                'menu-item--focused': this.hasFocus,
+                'menu-item--active': this.active,
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { part: "prefix", class: "menu-item__prefix" }, h("slot", { name: "prefix" })), h("span", { part: "label", class: "menu-item__label" }, h("slot", { ref: (el) => (this.defaultSlot = el) })), h("span", { part: "suffix", class: "menu-item__suffix" }, h("slot", { name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
+    }
+    static get is() { return "six-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checkType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'checkbox' | 'check'",
+                    "resolved": "\"check\" | \"checkbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the checked state is displayed as a checkbox or a check-icon"
+                },
+                "attribute": "check-type",
+                "reflect": false,
+                "defaultValue": "'check'"
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the button.",
-          "tags": []
-        }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\nchecked state"
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the menu item in a disabled state."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus from the button.",
-          "tags": []
-        }
-      },
-      "getTextLabel": {
-        "complexType": {
-          "signature": "() => Promise<string>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "active": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the button.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the button.",
+                    "tags": []
+                }
+            },
+            "getTextLabel": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns a text label based on the contents of the menu item's default slot.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "Returns a text label based on the contents of the menu item's default slot.",
-          "tags": []
-        }
-      }
-    };
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=six-menu-item.js.map

package/dist/collection/components/six-menu-item/six-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-menu-item.js","sourceRoot":"","sources":["../../../src/components/six-menu-item/six-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @State() hasFocus = false;\n\n  /** Set to true to draw the item in a checked state. */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    return this.setFocus();\n  }\n\n  private handleMouseLeave() {\n    return this.removeFocus();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <six-icon size=\"small\" aria-hidden=\"true\">\n            check\n          </six-icon>\n        </span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-menu-item.js","sourceRoot":"","sources":["../../../src/components/six-menu-item/six-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @Element() host!: HTMLSixMenuItemElement;\n\n  @State() hasFocus = false;\n\n  @State() active = false;\n\n  /** Defines if the checked state is displayed as a checkbox or a check-icon */\n  @Prop() checkType: 'checkbox' | 'check' = 'check';\n\n  /** Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\n   * checked state */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    this.active = true;\n  }\n\n  private handleMouseLeave() {\n    this.active = false;\n    this.hasFocus = false;\n  }\n\n  private handleCheckboxChange = () => {\n    this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n          'menu-item--active': this.active,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        {this.checkType === 'checkbox' && (\n          <span class=\"menu-item__checkbox\">\n            <six-checkbox\n              onSix-checkbox-change={this.handleCheckboxChange}\n              disabled={this.disabled}\n              checked={this.checked}\n            ></six-checkbox>\n          </span>\n        )}\n\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        {this.checkType === 'check' && (\n          <span part=\"checked-icon\" class=\"menu-item__check\">\n            <six-icon size=\"small\" aria-hidden=\"true\">\n              check\n            </six-icon>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-item/test/six-menu-item.spec.js

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixMenuItem } from "../six-menu-item";
 describe('six-menu-item', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SixMenuItem],
-      html: `<six-menu-item></six-menu-item>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixMenuItem],
+            html: `<six-menu-item></six-menu-item>`,
+        });
+        expect(page.root).toEqualHtml(`
       <six-menu-item value="">
         <mock:shadow-root>
           <div aria-checked="false" aria-disabled="false" class="menu-item" part="base" role="menuitem" tabindex="0">
@@ -28,6 +28,6 @@ describe('six-menu-item', () => {
         </mock:shadow-root>
       </six-menu-item>
     `);
-  });
+    });
 });
 //# sourceMappingURL=six-menu-item.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-menu-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu-item/test/six-menu-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;KAqB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenuItem } from '../six-menu-item';\n\ndescribe('six-menu-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenuItem],\n      html: `<six-menu-item></six-menu-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu-item value=\"\">\n        <mock:shadow-root>\n          <div aria-checked=\"false\" aria-disabled=\"false\" class=\"menu-item\" part=\"base\" role=\"menuitem\" tabindex=\"0\">\n            <span class=\"menu-item__prefix\" part=\"prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n            <span class=\"menu-item__label\" part=\"label\">\n              <slot></slot>\n            </span>\n            <span class=\"menu-item__suffix\" part=\"suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n            <span class=\"menu-item__check\" part=\"checked-icon\">\n              <six-icon aria-hidden=\"true\" size=\"small\">\n                check\n              </six-icon>\n            </span>\n          </div>\n        </mock:shadow-root>\n      </six-menu-item>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-menu-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu-item/test/six-menu-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;KAqB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenuItem } from '../six-menu-item';\n\ndescribe('six-menu-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenuItem],\n      html: `<six-menu-item></six-menu-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu-item value=\"\">\n        <mock:shadow-root>\n          <div aria-checked=\"false\" aria-disabled=\"false\" class=\"menu-item\" part=\"base\" role=\"menuitem\" tabindex=\"0\">\n            <span class=\"menu-item__prefix\" part=\"prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n            <span class=\"menu-item__label\" part=\"label\">\n              <slot></slot>\n            </span>\n            <span class=\"menu-item__suffix\" part=\"suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n            <span class=\"menu-item__check\" part=\"checked-icon\">\n              <six-icon aria-hidden=\"true\" size=\"small\">\n                check\n              </six-icon>\n            </span>\n          </div>\n        </mock:shadow-root>\n      </six-menu-item>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-menu-label/six-menu-label.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-menu-label/six-menu-label.js

@@ -10,20 +10,20 @@ import { h } from "@stencil/core";
  * @part base - The component's base wrapper.
  */
 export class SixMenuLabel {
-  render() {
-    return (h("div", { part: "base", class: "menu-label" }, h("slot", null)));
-  }
-  static get is() { return "six-menu-label"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-menu-label.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-menu-label.css"]
-    };
-  }
+    render() {
+        return (h("div", { part: "base", class: "menu-label" }, h("slot", null)));
+    }
+    static get is() { return "six-menu-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-menu-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-menu-label.css"]
+        };
+    }
 }
 //# sourceMappingURL=six-menu-label.js.map

package/dist/collection/components/six-menu-label/six-menu-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-menu-label.js","sourceRoot":"","sources":["../../../src/components/six-menu-label/six-menu-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;;;GASG;AAOH,MAAM,OAAO,YAAY;EACvB,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;MACjC,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu label's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-label',\n  styleUrl: 'six-menu-label.scss',\n  shadow: true,\n})\nexport class SixMenuLabel {\n  render() {\n    return (\n      <div part=\"base\" class=\"menu-label\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-menu-label.js","sourceRoot":"","sources":["../../../src/components/six-menu-label/six-menu-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;;;GASG;AAOH,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;YACjC,eAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu label's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-label',\n  styleUrl: 'six-menu-label.scss',\n  shadow: true,\n})\nexport class SixMenuLabel {\n  render() {\n    return (\n      <div part=\"base\" class=\"menu-label\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-label/test/six-menu-label.spec.js

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixMenuLabel } from "../six-menu-label";
 describe('six-menu-label', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SixMenuLabel],
-      html: `<six-menu-label></six-menu-label>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixMenuLabel],
+            html: `<six-menu-label></six-menu-label>`,
+        });
+        expect(page.root).toEqualHtml(`
       <six-menu-label>
         <mock:shadow-root>
           <div class="menu-label" part="base">
@@ -15,6 +15,6 @@ describe('six-menu-label', () => {
         </mock:shadow-root>
       </six-menu-label>
     `);
-  });
+    });
 });
 //# sourceMappingURL=six-menu-label.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-menu-label.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu-label/test/six-menu-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;MAC1B,IAAI,EAAE,mCAAmC;KAC1C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenuLabel } from '../six-menu-label';\n\ndescribe('six-menu-label', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenuLabel],\n      html: `<six-menu-label></six-menu-label>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu-label>\n        <mock:shadow-root>\n          <div class=\"menu-label\" part=\"base\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-menu-label>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-menu-label.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu-label/test/six-menu-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenuLabel } from '../six-menu-label';\n\ndescribe('six-menu-label', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenuLabel],\n      html: `<six-menu-label></six-menu-label>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu-label>\n        <mock:shadow-root>\n          <div class=\"menu-label\" part=\"base\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-menu-label>\n    `);\n  });\n});\n"]}