@six-group/ui-library 0.0.0-insider.cd0cd0d → 0.0.0-insider.d82aaa2

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

@@ -0,0 +1,93 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixMenu } from "../six-menu";
+describe('six-menu', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixMenu],
+      html: `<six-menu></six-menu>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-menu>
+        <mock:shadow-root>
+        <div class="menu" part="wrapper">
+          <div part="base" role="menu" tabindex="0">
+            <slot></slot>
+          </div>
+          </div>
+        </mock:shadow-root>
+      </six-menu>
+    `);
+  });
+  it('renders without box-shadow', async () => {
+    const page = await newSpecPage({
+      components: [SixMenu],
+      html: `<six-menu remove-box-shadow></six-menu>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-menu remove-box-shadow>
+        <mock:shadow-root>
+        <div class="menu menu--noshadow" part="wrapper">
+          <div part="base" role="menu" tabindex="0">
+            <slot></slot>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-menu>
+    `);
+  });
+  it('renders virtual scrolling', async () => {
+    const page = await newSpecPage({
+      components: [SixMenu],
+      html: `<six-menu virtual-scroll></six-menu>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-menu virtual-scroll="">
+        <mock:shadow-root>
+          <div class="menu menu__wrapper--scrollable" part="wrapper" style="height: 320px;">
+            <div part="base" role="menu" tabindex="0" style="transform: translateY(0px);">
+              <slot></slot>
+            </div>
+            <div></div>
+          </div>
+        </mock:shadow-root>
+      </six-menu>
+    `);
+  });
+  it('renders dynamically added items', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [SixMenu],
+      html: `<six-menu></six-menu>`,
+    });
+    // when
+    if (page.root != null) {
+      page.root.items = Array.from(Array(3).keys()).map((idx) => ({
+        label: `label ${idx}`,
+        value: `value ${idx}`,
+      }));
+    }
+    await page.waitForChanges();
+    // then
+    expect(page.root).toEqualHtml(`
+      <six-menu>
+        <mock:shadow-root>
+          <div class="menu" part="wrapper">
+            <div part="base" role="menu" tabindex="0">
+              <slot></slot>
+              <six-menu-item value="value 0">
+                label 0
+              </six-menu-item>
+              <six-menu-item value="value 1">
+                label 1
+              </six-menu-item>
+              <six-menu-item value="value 2">
+                label 2
+              </six-menu-item>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </six-menu>
+    `);
+  });
+});
+//# sourceMappingURL=six-menu.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu/test/six-menu.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uBAAuB;KAC9B,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,yCAAyC;KAChD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,sCAAsC;KAC7C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,QAAQ;IACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uBAAuB;KAC9B,CAAC,CAAC;IAEH,OAAO;IACP,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;MACrB,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC1D,KAAK,EAAE,SAAS,GAAG,EAAE;QACrB,KAAK,EAAE,SAAS,GAAG,EAAE;OACtB,CAAC,CAAC,CAAC;KACL;IACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenu } from '../six-menu';\n\ndescribe('six-menu', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenu],\n      html: `<six-menu></six-menu>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu>\n        <mock:shadow-root>\n        <div class=\"menu\" part=\"wrapper\">\n          <div part=\"base\" role=\"menu\" tabindex=\"0\">\n            <slot></slot>\n          </div>\n          </div>\n        </mock:shadow-root>\n      </six-menu>\n    `);\n  });\n\n  it('renders without box-shadow', async () => {\n    const page = await newSpecPage({\n      components: [SixMenu],\n      html: `<six-menu remove-box-shadow></six-menu>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu remove-box-shadow>\n        <mock:shadow-root>\n        <div class=\"menu menu--noshadow\" part=\"wrapper\">\n          <div part=\"base\" role=\"menu\" tabindex=\"0\">\n            <slot></slot>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-menu>\n    `);\n  });\n\n  it('renders virtual scrolling', async () => {\n    const page = await newSpecPage({\n      components: [SixMenu],\n      html: `<six-menu virtual-scroll></six-menu>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu virtual-scroll=\"\">\n        <mock:shadow-root>\n          <div class=\"menu menu__wrapper--scrollable\" part=\"wrapper\" style=\"height: 320px;\">\n            <div part=\"base\" role=\"menu\" tabindex=\"0\" style=\"transform: translateY(0px);\">\n              <slot></slot>\n            </div>\n            <div></div>\n          </div>\n        </mock:shadow-root>\n      </six-menu>\n    `);\n  });\n\n  it('renders dynamically added items', async () => {\n    // given\n    const page = await newSpecPage({\n      components: [SixMenu],\n      html: `<six-menu></six-menu>`,\n    });\n\n    // when\n    if (page.root != null) {\n      page.root.items = Array.from(Array(3).keys()).map((idx) => ({\n        label: `label ${idx}`,\n        value: `value ${idx}`,\n      }));\n    }\n    await page.waitForChanges();\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-menu>\n        <mock:shadow-root>\n          <div class=\"menu\" part=\"wrapper\">\n            <div part=\"base\" role=\"menu\" tabindex=\"0\">\n              <slot></slot>\n              <six-menu-item value=\"value 0\">\n                label 0\n              </six-menu-item>\n              <six-menu-item value=\"value 1\">\n                label 1\n              </six-menu-item>\n              <six-menu-item value=\"value 2\">\n                label 2\n              </six-menu-item>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </six-menu>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

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

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixMenuDivider } from "../six-menu-divider";
+describe('six-menu-divider', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixMenuDivider],
+      html: `<six-menu-divider></six-menu-divider>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-menu-divider>
+        <mock:shadow-root>
+          <div part="base" class="menu-divider" role="separator" aria-hidden="true" />
+        </mock:shadow-root>
+      </six-menu-divider>
+    `);
+  });
+});
+//# sourceMappingURL=six-menu-divider.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu-divider.spec.js","sourceRoot":"","sources":["../../../../src/components/six-menu-divider/test/six-menu-divider.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uCAAuC;KAC9C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixMenuDivider } from '../six-menu-divider';\n\ndescribe('six-menu-divider', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixMenuDivider],\n      html: `<six-menu-divider></six-menu-divider>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-menu-divider>\n        <mock:shadow-root>\n          <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />\n        </mock:shadow-root>\n      </six-menu-divider>\n    `);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { getTextContent } from '../../utils/slot';
+import { h } from "@stencil/core";
+import { getTextContent } from "../../utils/slot";
 /**
  * @since 1.0
  * @status stable
@@ -149,10 +149,12 @@ export class SixMenuItem {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -168,7 +170,8 @@ export class SixMenuItem {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -184,7 +187,8 @@ export class SixMenuItem {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<string>"

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, 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"]}

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

@@ -0,0 +1,33 @@
+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(`
+      <six-menu-item value="">
+        <mock:shadow-root>
+          <div aria-checked="false" aria-disabled="false" class="menu-item" part="base" role="menuitem" tabindex="0">
+            <span class="menu-item__prefix" part="prefix">
+              <slot name="prefix"></slot>
+            </span>
+            <span class="menu-item__label" part="label">
+              <slot></slot>
+            </span>
+            <span class="menu-item__suffix" part="suffix">
+              <slot name="suffix"></slot>
+            </span>
+            <span class="menu-item__check" part="checked-icon">
+              <six-icon aria-hidden="true" size="small">
+                check
+              </six-icon>
+            </span>
+          </div>
+        </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

@@ -0,0 +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"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

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

@@ -0,0 +1,20 @@
+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(`
+      <six-menu-label>
+        <mock:shadow-root>
+          <div class="menu-label" part="base">
+            <slot></slot>
+          </div>
+        </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

@@ -0,0 +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"]}

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * @since 1.1
  * @status stable

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

@@ -0,0 +1,33 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixPicto } from "../six-picto";
+describe('six-picto', () => {
+  it('renders correct pictogram', async () => {
+    const page = await newSpecPage({
+      components: [SixPicto],
+      html: `<six-picto>copy</six-picto>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-picto>
+        <mock:shadow-root>
+          <div class="copy is-size-medium" part="icon"></div>
+        </mock:shadow-root>
+        copy
+      </six-picto>
+    `);
+  });
+  it('renders picto in correct size', async () => {
+    const page = await newSpecPage({
+      components: [SixPicto],
+      html: `<six-picto size="xxLarge">search</six-picto>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-picto size="xxLarge">
+        <mock:shadow-root>
+          <div class="is-size-xxLarge search" part="icon"></div>
+        </mock:shadow-root>
+        search
+      </six-picto>
+    `);
+  });
+});
+//# sourceMappingURL=six-picto.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-picto.spec.js","sourceRoot":"","sources":["../../../../src/components/six-picto/test/six-picto.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixPicto } from '../six-picto';\n\ndescribe('six-picto', () => {\n  it('renders correct pictogram', async () => {\n    const page = await newSpecPage({\n      components: [SixPicto],\n      html: `<six-picto>copy</six-picto>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-picto>\n        <mock:shadow-root>\n          <div class=\"copy is-size-medium\" part=\"icon\"></div>\n        </mock:shadow-root>\n        copy\n      </six-picto>\n    `);\n  });\n\n  it('renders picto in correct size', async () => {\n    const page = await newSpecPage({\n      components: [SixPicto],\n      html: `<six-picto size=\"xxLarge\">search</six-picto>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-picto size=\"xxLarge\">\n        <mock:shadow-root>\n          <div class=\"is-size-xxLarge search\" part=\"icon\"></div>\n        </mock:shadow-root>\n        search\n      </six-picto>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

package/dist/collection/components/six-progress-bar/test/six-progress-bar.spec.js

@@ -0,0 +1,24 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixProgressBar } from "../six-progress-bar";
+describe('six-progress-bar', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixProgressBar],
+      html: `<six-progress-bar percentage="50"></six-progress-bar>`,
+    });
+    expect(page.root).toEqualHtml(`
+       <six-progress-bar percentage="50">
+         <mock:shadow-root>
+           <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" part="base" role="progressbar">
+             <div class="progress-bar__indicator" part="indicator" style="width: 50%;">
+               <span class="progress-bar__label" part="label">
+                 <slot></slot>
+               </span>
+             </div>
+           </div>
+         </mock:shadow-root>
+       </six-progress-bar>
+    `);
+  });
+});
+//# sourceMappingURL=six-progress-bar.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-bar.spec.js","sourceRoot":"","sources":["../../../../src/components/six-progress-bar/test/six-progress-bar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uDAAuD;KAC9D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixProgressBar } from '../six-progress-bar';\n\ndescribe('six-progress-bar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixProgressBar],\n      html: `<six-progress-bar percentage=\"50\"></six-progress-bar>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-progress-bar percentage=\"50\">\n         <mock:shadow-root>\n           <div aria-valuemax=\"100\" aria-valuemin=\"0\" aria-valuenow=\"50\" class=\"progress-bar\" part=\"base\" role=\"progressbar\">\n             <div class=\"progress-bar__indicator\" part=\"indicator\" style=\"width: 50%;\">\n               <span class=\"progress-bar__label\" part=\"label\">\n                 <slot></slot>\n               </span>\n             </div>\n           </div>\n         </mock:shadow-root>\n       </six-progress-bar>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-progress-ring/six-progress-ring.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

package/dist/collection/components/six-progress-ring/test/six-progress-ring.spec.js

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixProgressRing } from "../six-progress-ring";
+describe('six-progress-ring', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixProgressRing],
+      html: `<six-progress-ring></six-progress-ring>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-progress-ring>
+        <mock:shadow-root>
+         <div class="progress-ring" part="base">
+          <svg class="progress-ring__image" height="128" width="128">
+           <circle class="progress-ring__track" cx="64" cy="64" fill="transparent" r="56" stroke-linecap="round" stroke-width="4"></circle>
+           <circle class="progress-ring__indicator" cx="64" cy="64" fill="transparent" r="56" stroke-linecap="round" stroke-width="4"></circle>
+          </svg>
+          <span class="progress-ring__label" part="label">
+           <slot></slot>
+          </span>
+         </div>
+        </mock:shadow-root>
+      </six-progress-ring>
+    `);
+  });
+});
+//# sourceMappingURL=six-progress-ring.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-ring.spec.js","sourceRoot":"","sources":["../../../../src/components/six-progress-ring/test/six-progress-ring.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yCAAyC;KAChD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixProgressRing } from '../six-progress-ring';\n\ndescribe('six-progress-ring', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixProgressRing],\n      html: `<six-progress-ring></six-progress-ring>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-progress-ring>\n        <mock:shadow-root>\n         <div class=\"progress-ring\" part=\"base\">\n          <svg class=\"progress-ring__image\" height=\"128\" width=\"128\">\n           <circle class=\"progress-ring__track\" cx=\"64\" cy=\"64\" fill=\"transparent\" r=\"56\" stroke-linecap=\"round\" stroke-width=\"4\"></circle>\n           <circle class=\"progress-ring__indicator\" cx=\"64\" cy=\"64\" fill=\"transparent\" r=\"56\" stroke-linecap=\"round\" stroke-width=\"4\"></circle>\n          </svg>\n          <span class=\"progress-ring__label\" part=\"label\">\n           <slot></slot>\n          </span>\n         </div>\n        </mock:shadow-root>\n      </six-progress-ring>\n    `);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { EventListeners } from '../../utils/event-listeners';
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
 let id = 0;
 /**
  * @since 1.0
@@ -19,11 +19,10 @@ export class SixRadio {
     this.inputId = `radio-${++id}`;
     this.labelId = `radio-label-${id}`;
     this.eventListeners = new EventListeners();
-    /** default state whether the radio button should be checked or not when resetting */
-    this.defaultState = false;
     this.handleClick = () => {
       if (this.nativeInput != null) {
         this.checked = this.nativeInput.checked;
+        this.sixChange.emit();
       }
     };
     this.handleBlur = () => {
@@ -34,19 +33,20 @@ export class SixRadio {
       this.hasFocus = true;
       this.sixFocus.emit();
     };
-    this.handleKeyDown = (event) => {
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+    this.handleKeyDown = (keyboardEvent) => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {
         const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-        const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+        const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;
         let index = radios.indexOf(this.host) + incr;
         if (index < 0)
           index = radios.length - 1;
         if (index > radios.length - 1)
           index = 0;
-        this.getAllRadios().map((radio) => (radio.checked = false));
+        this.getAllRadios().forEach((radio) => (radio.checked = false));
         radios[index].setFocus();
         radios[index].checked = true;
-        event.preventDefault();
+        radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));
+        keyboardEvent.preventDefault();
       }
     };
     this.handleMouseDown = (event) => {
@@ -64,11 +64,10 @@ export class SixRadio {
   }
   handleCheckedChange() {
     if (this.checked) {
-      this.getSiblingRadios().map((radio) => (radio.checked = false));
+      this.getSiblingRadios().forEach((radio) => (radio.checked = false));
     }
     if (this.nativeInput != null) {
       this.nativeInput.checked = this.checked;
-      this.sixChange.emit();
     }
   }
   handleNameChange(name) {
@@ -81,9 +80,6 @@ export class SixRadio {
     this.eventListeners.forward('six-radio-blur', 'blur', this.host);
     this.eventListeners.forward('six-radio-focus', 'focus', this.host);
   }
-  componentWillLoad() {
-    this.defaultState = this.checked;
-  }
   disconnectedCallback() {
     this.eventListeners.removeAll();
   }
@@ -97,12 +93,8 @@ export class SixRadio {
     var _a;
     (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
-  /** Resets the formcontrol */
-  async reset() {
-    this.checked = this.defaultState;
-  }
   getAllRadios() {
-    const form = this.host.closest('six-form, form') || document.body;
+    const form = this.host.closest('form') || document.body;
     if (this.name === '')
       return [];
     return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
@@ -246,7 +238,8 @@ export class SixRadio {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -266,7 +259,8 @@ export class SixRadio {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -286,7 +280,8 @@ export class SixRadio {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -303,10 +298,12 @@ export class SixRadio {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -322,7 +319,8 @@ export class SixRadio {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -331,22 +329,6 @@ export class SixRadio {
           "text": "Removes focus from the radio.",
           "tags": []
         }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\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  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().map((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n      this.sixChange.emit();\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('six-form, form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().map((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\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  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}