@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

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

@@ -8,6 +8,16 @@ import { hasSlot } from "../../utils/slot";
  */
 export class SixSidebarItemGroup {
     constructor() {
+        this.hasItems = false;
+        /** Title of item group */
+        this.name = '';
+        /** Icon of the group */
+        this.icon = '';
+        /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
+        this.value = '';
+        /** Indicates whether the sidebar is shown */
+        this.open = false;
+        this.summaryIconHasContent = false;
         this.provideSlot = (name) => {
             if (this.summaryIconHasContent) {
                 return (h("div", { slot: name }, h("slot", { name: name })));
@@ -20,14 +30,6 @@ export class SixSidebarItemGroup {
                     }
                 } }));
         };
-        this.hasItems = false;
-        this.name = '';
-        this.icon = '';
-        this.value = '';
-        this.open = false;
-        this.summaryIcon = undefined;
-        this.summaryIconHasContent = false;
-        this.href = undefined;
     }
     connectedCallback() {
         this.handleSlotChange = this.handleSlotChange.bind(this);
@@ -50,7 +52,7 @@ export class SixSidebarItemGroup {
                 'six-sidebar-item-group': true,
                 'six-sidebar-item-group--childless': !this.hasItems,
                 'six-sidebar-item-group--subgroup': this.isSubgroup(),
-            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems, tabindex: this.renderAsHref() ? -1 : undefined }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
         if (this.renderAsHref()) {
             return (h("a", { class: "six-sidebar-details__link", href: this.href }, element));
         }
@@ -86,6 +88,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "Title of item group"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -104,6 +108,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "Icon of the group"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
@@ -122,6 +128,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -140,6 +148,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "Indicates whether the sidebar is shown"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -158,6 +168,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "Custom summary icon name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "summary-icon",
                 "reflect": false
             },
@@ -175,6 +187,8 @@ export class SixSidebarItemGroup {
                     "tags": [],
                     "text": "Provide if the item should be rendered as anchor tag.\nNote, that the href is added automatically when using routerLink in Angular."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": true
             }

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

@@ -1 +1 @@
-{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;GAKG;AAOH,MAAM,OAAO,mBAAmB;;QAgDtB,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;YACrC,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,OAAO,CACL,WAAK,IAAI,EAAE,IAAI;oBACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,CACP,CAAC;aACH;YAED,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,GAAG,EAAE;;oBACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;oBAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;wBAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;qBAC9D;gBACH,CAAC,GACK,CACT,CAAC;QACJ,CAAC,CAAC;wBAjEkB,KAAK;oBAGV,EAAE;oBAGF,EAAE;qBAGgB,EAAE;oBAGH,KAAK;;qCAKJ,KAAK;;;IAQtC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEO,UAAU;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;IAC5E,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC7C,CAAC;IAwBD,MAAM;QACJ,MAAM,OAAO,GAAG,CACd,mBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;aACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ;YAEzB,WAAK,IAAI,EAAC,SAAS;gBACjB,WAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY;oBACtF,IAAI,CAAC,IAAI,CACN,CACF;YACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;YACjC,eAAQ,CACI,CACf,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,OAAO,CACL,SAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,OAAO,CACN,CACL,CAAC;SACH;aAAM;YACL,OAAO,OAAO,CAAC;SAChB;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"]}
+{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n        tabindex={this.renderAsHref() ? -1 : undefined}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"]}

package/dist/collection/components/six-spinner/six-spinner.css

@@ -67,6 +67,51 @@
   -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
   animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
 }
+.six-spinner polygon {
+  stroke-dasharray: 310;
+  stroke-dashoffset: 310;
+  animation: big-polygon-draw 2s ease-in-out infinite;
+  -webkit-animation: big-polygon-draw 2s ease-in-out infinite;
+}
+.six-spinner polygon:nth-child(2),
+.six-spinner polygon:nth-child(3) {
+  stroke-dasharray: 110;
+  stroke-dashoffset: 110;
+  animation: small-polygon-draw 2s ease-in-out infinite;
+  -webkit-animation: small-polygon-draw 2s ease-in-out infinite;
+}
+@keyframes big-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 310;
+  }
+  50% {
+    stroke-dashoffset: 140;
+  }
+}
+@-webkit-keyframes big-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 310;
+  }
+  50% {
+    stroke-dashoffset: 140;
+  }
+}
+@keyframes small-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 110;
+  }
+  50% {
+    stroke-dashoffset: 50;
+  }
+}
+@-webkit-keyframes small-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 110;
+  }
+  50% {
+    stroke-dashoffset: 50;
+  }
+}
 @-webkit-keyframes six-spinner {
   to {
     stroke-dashoffset: -444;

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

@@ -6,20 +6,49 @@ import { h } from "@stencil/core";
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @part base - The component's base wrapper.
- * @part svg - The spinner icon
+ * @part svg - The spinner icon.
  */
 export class SixSpinner {
-    constructor() {
-        this.six = false;
+    /**
+     * Renders a container with a given SVG content.
+     */
+    renderWrapper(content) {
+        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, content)));
     }
+    /**
+     * Renders the SIX logo spinner.
+     */
     renderSIXLogo() {
-        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+        const sixLogo = (h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })));
+        return this.renderWrapper(sixLogo);
     }
-    renderSimple() {
+    /**
+     * Renders the BME logo spinner.
+     */
+    renderBMELogo() {
+        const bmeLogo = (h("svg", { viewBox: "0 0 45 55", part: "svg" }, h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719" })));
+        return this.renderWrapper(bmeLogo);
+    }
+    /**
+     * Renders a simple spinner.
+     */
+    renderSimpleSpinner() {
         return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
     }
     render() {
-        return this.six ? this.renderSIXLogo() : this.renderSimple();
+        // Check the deprecated `six` property first
+        if (this.six) {
+            console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');
+            return this.renderSIXLogo();
+        }
+        switch (this.logo) {
+            case 'six':
+                return this.renderSIXLogo();
+            case 'bme':
+                return this.renderBMELogo();
+            default:
+                return this.renderSimpleSpinner();
+        }
     }
     static get is() { return "six-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -35,23 +64,43 @@ export class SixSpinner {
     }
     static get properties() {
         return {
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'six' | 'bme'",
+                    "resolved": "\"bme\" | \"six\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "logo",
+                "reflect": false
+            },
             "six": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates if the spinner is shown as animated SIX logo or simple spinner."
+                    "text": "**@deprecated** Use `logo=\"six\"` instead.\n\nIf set to true, the spinner displays the SIX logo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "six",
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;;mBAEP,KAAK;;IAEX,aAAa;QACnB,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;YAC3D,WAAK,KAAK,EAAC,wBAAwB;gBACjC,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;oBACjC,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC/D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } 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 * @part base - The component's base wrapper.\n * @part svg - The spinner icon\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\" part=\"svg\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"]}
+{"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;IAUrB;;OAEG;IACK,aAAa,CAAC,OAAmB;QACvC,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;YAC3D,WAAK,KAAK,EAAC,wBAAwB,IAAE,OAAO,CAAO,CAC9C,CACR,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,MAAM,OAAO,GAAG,CACd,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;YACjC,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,MAAM,OAAO,GAAG,CACd,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;YACjC,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,6GAA6G,GACpH;YACF,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,4DAA4D,GACnE;YACF,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,yDAAyD,GAChE,CACE,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,4CAA4C;QAC5C,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;QAC9B,CAAC;QAED,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B;gBACE,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } 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 * @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */\n  @Prop() logo?: 'six' | 'bme';\n  /**\n   * **@deprecated** Use `logo=\"six\"` instead.\n   *\n   * If set to true, the spinner displays the SIX logo.\n   */\n  @Prop() six?: boolean;\n\n  /**\n   * Renders a container with a given SVG content.\n   */\n  private renderWrapper(content: SVGElement) {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">{content}</div>\n      </span>\n    );\n  }\n\n  /**\n   * Renders the SIX logo spinner.\n   */\n  private renderSIXLogo() {\n    const sixLogo = (\n      <svg viewBox=\"0 0 40 40\" part=\"svg\">\n        <path\n          fill=\"none\"\n          stroke=\"#de3919\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n        ></path>\n      </svg>\n    );\n    return this.renderWrapper(sixLogo);\n  }\n\n  /**\n   * Renders the BME logo spinner.\n   */\n  private renderBMELogo() {\n    const bmeLogo = (\n      <svg viewBox=\"0 0 45 55\" part=\"svg\">\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n        />\n      </svg>\n    );\n    return this.renderWrapper(bmeLogo);\n  }\n\n  /**\n   * Renders a simple spinner.\n   */\n  private renderSimpleSpinner() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    // Check the deprecated `six` property first\n    if (this.six) {\n      console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n      return this.renderSIXLogo();\n    }\n\n    switch (this.logo) {\n      case 'six':\n        return this.renderSIXLogo();\n      case 'bme':\n        return this.renderBMELogo();\n      default:\n        return this.renderSimpleSpinner();\n    }\n  }\n}\n"]}

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 export class SixStageIndicator {
     constructor() {
+        /** The indicators value attribute */
         this.stage = null;
     }
     render() {
@@ -40,6 +41,8 @@ export class SixStageIndicator {
                     "tags": [],
                     "text": "The indicators value attribute"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "stage",
                 "reflect": false,
                 "defaultValue": "null"

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-stage-indicator.js","sourceRoot":"","sources":["../../../src/components/six-stage-indicator/six-stage-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE;YAClD,WAAK,KAAK,EAAC,gBAAgB;gBACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;gBACX,YAAM,KAAK,EAAE,YAAY;oBACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-stage-indicator.js","sourceRoot":"","sources":["../../../src/components/six-stage-indicator/six-stage-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;IAL9B;QAME,qCAAqC;QAC7B,UAAK,GAAc,IAAI,CAAC;KAgBjC;IAdC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE;YAClD,WAAK,KAAK,EAAC,gBAAgB;gBACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;gBACX,YAAM,KAAK,EAAE,YAAY;oBACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -23,6 +23,24 @@ export class SixSwitch {
         this.labelId = `switch-label-${id}`;
         this.errorTextId = `input-error-text-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasErrorTextSlot = false;
+        /** The switch's name attribute. */
+        this.name = '';
+        /** The switch's value attribute. */
+        this.value = 'on';
+        /** Set to true to disable the switch. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** Set to true to draw the switch in a checked state. */
+        this.checked = 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;
         this.handleSlotChange = () => {
             this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
         };
@@ -58,17 +76,6 @@ export class SixSwitch {
             event.preventDefault();
             (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        this.hasFocus = false;
-        this.hasErrorTextSlot = false;
-        this.name = '';
-        this.value = 'on';
-        this.disabled = false;
-        this.required = false;
-        this.checked = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
     }
     componentWillLoad() {
         this.handleSlotChange();
@@ -105,12 +112,12 @@ export class SixSwitch {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { 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", { part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: 'ea977a4c3679aad414bbf614784525f80f3cdfa2', 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: '47d1bea4fb8dd49e5695cc9a0a62f178faab75b9', 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", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { 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", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null)))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: '8c471ca1aad813d7d773ad39a3c76e4ea2f085a0', part: "control", class: "switch__control" }, h("span", { key: '80441f79d3da03bbd05879f230e4def1b4f36386', part: "thumb", class: "switch__thumb" }), h("input", { key: 'dc35e7d4ba3b4198f38211bcaae34146726aee76', 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: '14cd70ebc30c70e1a3c13162fa0e3b62497c2ed2', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: '7757ec7b7eeaadc2cbf1624c02f3b6155e2448fe' })))));
     }
     static get is() { return "six-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -140,6 +147,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "The switch's name attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -158,6 +167,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "The switch's value attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
@@ -176,6 +187,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "Set to true to disable the switch."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -194,6 +207,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -212,6 +227,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "Set to true to draw the switch in a checked state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -230,6 +247,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "The label text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -248,6 +267,8 @@ export class SixSwitch {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -266,6 +287,8 @@ export class SixSwitch {
                     "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,
                 "attribute": "error-text-count",
                 "reflect": false
             },
@@ -283,6 +306,8 @@ export class SixSwitch {
                     "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,
                 "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.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';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The label text. */\n  @Prop() label = '';\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  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\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      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          htmlFor={this.switchId}\n          class={{\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n          }}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\" />\n\n            <input\n              ref={(el) => (this.inputElement = el)}\n              id={this.switchId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"switch\"\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              onKeyDown={this.handleKeyDown}\n            />\n          </span>\n\n          <span part=\"label\" id={this.labelId} class=\"switch__label\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.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';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  private switchId = `switch-${++id}`;\n  private labelId = `switch-label-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n\n  private inputElement?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixSwitchElement;\n\n  @State() hasFocus = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The switch's name attribute. */\n  @Prop() name = '';\n\n  /** The switch's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The label text. */\n  @Prop() label = '';\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  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.inputElement != null) {\n      this.inputElement.checked = this.checked;\n      this.checked = this.inputElement.checked;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-switch-change', 'change', this.host);\n    this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n    this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.inputElement?.blur();\n  }\n\n  private handleClick = () => {\n    if (this.inputElement != null) {\n      this.checked = this.inputElement.checked;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\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      this.checked = false;\n      this.sixChange.emit(this.checked);\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.sixChange.emit(this.checked);\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.inputElement?.focus();\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.switchId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={false}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          htmlFor={this.switchId}\n          class={{\n            switch: true,\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--focused': this.hasFocus,\n          }}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"switch__control\">\n            <span part=\"thumb\" class=\"switch__thumb\" />\n\n            <input\n              ref={(el) => (this.inputElement = el)}\n              id={this.switchId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"switch\"\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              onKeyDown={this.handleKeyDown}\n            />\n          </span>\n\n          <span part=\"label\" id={this.labelId} class=\"switch__label\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -14,9 +14,13 @@ let id = 0;
 export class SixTab {
     constructor() {
         this.componentId = `tab-${++id}`;
+        /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
         this.panel = '';
+        /** Set to true to draw the tab in an active state. */
         this.active = false;
+        /** When true, the tab will be rendered with a close icon. */
         this.closable = false;
+        /** Set to true to draw the tab in a disabled state. */
         this.disabled = false;
     }
     connectedCallback() {
@@ -41,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, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '1d5d5e515bd7491370ca506c0613dc5787692a54', id: this.host.id || this.componentId }, h("div", { key: 'e13f65d6a2d3d70f7b4463b8c685d857020f3597', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -52,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' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: '6fde6d26cb76ba8bd62fd0bf6535b3b34b699c2c' }), this.closable && (h("six-icon-button", { key: 'be5edcec20b6f91ca0c6f3bd1ac96372bf579e7f', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'c1fd8a1b882d7f43b36797156e5e2ef8682b1431', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements
@@ -90,6 +94,8 @@ export class SixTab {
                     "tags": [],
                     "text": "The name of the tab panel the tab will control. The panel must be located in the same tab group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel",
                 "reflect": true,
                 "defaultValue": "''"
@@ -108,6 +114,8 @@ export class SixTab {
                     "tags": [],
                     "text": "Set to true to draw the tab in an active state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -126,6 +134,8 @@ export class SixTab {
                     "tags": [],
                     "text": "When true, the tab will be rendered with a close icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "closable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -144,6 +154,8 @@ export class SixTab {
                     "tags": [],
                     "text": "Set to true to draw the tab in a disabled state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          part={this.active ? 'active-tab-indicator' : ''}\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}