@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.931e1d7

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * @since 1.1
  * @status stable
@@ -6,48 +6,72 @@ import { Host, h } from '@stencil/core';
  * @part icon - The component's icon wrapper.
  */
 export class SixPicto {
-  constructor() {
-    this.size = 'medium';
-  }
-  render() {
-    var _a;
-    const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-    return (h(Host, null, h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
-  }
-  static get is() { return "six-picto"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-picto.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-picto.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
-          "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines the size of the icon."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        this.size = 'medium';
+        this.svgContent = null;
+    }
+    async componentWillLoad() {
+        var _a;
+        const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
+        if (iconName) {
+            try {
+                const response = await fetch(`/assets/pictograms/${iconName}.svg`);
+                if (response.ok) {
+                    this.svgContent = await response.text();
+                }
+                else {
+                    console.error(`Icon "${iconName}" not found in assets/pictograms.`);
+                }
+            }
+            catch (error) {
+                console.error(`Error loading icon "${iconName}":`, error);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '2f9f84aaf14ad2d5d0fde0efc867ccfbcdaff21c' }, h("div", { key: '44198354d0f1e4d1cbcd97241f02c205219e727d', part: "icon", class: {
+                [`is-size-${this.size}`]: true,
+            }, innerHTML: this.svgContent || '' })));
+    }
+    static get is() { return "six-picto"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-picto.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-picto.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
+                    "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the size of the icon."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "svgContent": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=six-picto.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-picto.js","sourceRoot":"","sources":["../../../src/components/six-picto/six-picto.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;gBAMiF,QAAQ;;EAE5G,MAAM;;IACJ,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IAC7C,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAI,CACvF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n/**\n * @since 1.1\n * @status stable\n *\n * @part icon - The component's icon wrapper.\n */\n\n@Component({\n  tag: 'six-picto',\n  styleUrl: 'six-picto.scss',\n  shadow: true,\n})\nexport class SixPicto {\n  @Element() host: HTMLSixPictoElement;\n\n  /**\n   * Defines the size of the icon.\n   */\n  @Prop() size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl' = 'medium';\n\n  render() {\n    const iconName = this.host.innerHTML?.trim();\n    return (\n      <Host>\n        <div part=\"icon\" class={{ [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true }} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-picto.js","sourceRoot":"","sources":["../../../src/components/six-picto/six-picto.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;oBAMiF,QAAQ;0BAEvE,IAAI;;IAEzC,KAAK,CAAC,iBAAiB;;QACrB,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,sBAAsB,QAAQ,MAAM,CAAC,CAAC;gBACnE,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;oBAChB,IAAI,CAAC,UAAU,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,SAAS,QAAQ,mCAAmC,CAAC,CAAC;gBACtE,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,uBAAuB,QAAQ,IAAI,EAAE,KAAK,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBAC/B,EACD,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,GAC3B,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @since 1.1\n * @status stable\n *\n * @part icon - The component's icon wrapper.\n */\n\n@Component({\n  tag: 'six-picto',\n  styleUrl: 'six-picto.scss',\n  shadow: true,\n})\nexport class SixPicto {\n  @Element() host!: HTMLSixPictoElement;\n\n  /**\n   * Defines the size of the icon.\n   */\n  @Prop() size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl' = 'medium';\n\n  @State() svgContent: string | null = null;\n\n  async componentWillLoad() {\n    const iconName = this.host.innerHTML?.trim();\n    if (iconName) {\n      try {\n        const response = await fetch(`/assets/pictograms/${iconName}.svg`);\n        if (response.ok) {\n          this.svgContent = await response.text();\n        } else {\n          console.error(`Icon \"${iconName}\" not found in assets/pictograms.`);\n        }\n      } catch (error) {\n        console.error(`Error loading icon \"${iconName}\":`, error);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          part=\"icon\"\n          class={{\n            [`is-size-${this.size}`]: true,\n          }}\n          innerHTML={this.svgContent || ''} // Inject the loaded SVG content into the component\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 /**

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
@@ -12,69 +12,69 @@ import { h } from '@stencil/core';
  * @part label - The progress bar label.
  */
 export class SixProgressBar {
-  constructor() {
-    this.percentage = 0;
-    this.indeterminate = false;
-  }
-  render() {
-    return (h("div", { part: "base", class: {
-        'progress-bar': true,
-        'progress-bar--indeterminate': this.indeterminate,
-      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-        width: `${this.percentage}%`,
-      } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
-  }
-  static get is() { return "six-progress-bar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-progress-bar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-progress-bar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "percentage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The progress bar's percentage, 0 to 100."
-        },
-        "attribute": "percentage",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "indeterminate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
-        },
-        "attribute": "indeterminate",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
+    constructor() {
+        this.percentage = 0;
+        this.indeterminate = false;
+    }
+    render() {
+        return (h("div", { key: '45ac15bb610a1cf554978f14faf62468248456b5', part: "base", class: {
+                'progress-bar': true,
+                'progress-bar--indeterminate': this.indeterminate,
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '5e1669e12a54f369b24159db5533adfe6e4afc23', part: "indicator", class: "progress-bar__indicator", style: {
+                width: `${this.percentage}%`,
+            } }, !this.indeterminate && (h("span", { key: 'ee288552a254819e817c639a4d557a174d827c71', part: "label", class: "progress-bar__label" }, h("slot", { key: '201bc1ed20890d847d578c322fb1e6911df497b1' }))))));
+    }
+    static get is() { return "six-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "percentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress bar's percentage, 0 to 100."
+                },
+                "attribute": "percentage",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+                },
+                "attribute": "indeterminate",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
 }
 //# sourceMappingURL=six-progress-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-progress-bar.js","sourceRoot":"","sources":["../../../src/components/six-progress-bar/six-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,cAAc;;sBAEJ,CAAC;yBAGE,KAAK;;EAE7B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MAE1D,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;SAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;QAC5C,eAAQ,CACH,CACR,CACG,CACF,CACP,CAAC;EACJ,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 * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-progress-bar.js","sourceRoot":"","sources":["../../../src/components/six-progress-bar/six-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,cAAc;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;YAE1D,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;iBAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;gBAC5C,8DAAQ,CACH,CACR,CACG,CACF,CACP,CAAC;IACJ,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 * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 /**

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
@@ -11,104 +11,105 @@ import { h } from '@stencil/core';
  * @part label - The progress ring label.
  */
 export class SixProgressRing {
-  constructor() {
-    this.size = 128;
-    this.strokeWidth = 4;
-    this.percentage = undefined;
-  }
-  handlePercentageChange() {
-    this.updateProgress();
-  }
-  componentDidLoad() {
-    this.updateProgress();
-  }
-  updateProgress() {
-    if (!this.indicator.r) {
-      return;
+    constructor() {
+        this.size = 128;
+        this.strokeWidth = 4;
+        this.percentage = 0;
+    }
+    handlePercentageChange() {
+        this.updateProgress();
+    }
+    componentDidLoad() {
+        this.updateProgress();
+    }
+    updateProgress() {
+        var _a;
+        if (((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.r) == null)
+            return;
+        const radius = this.indicator.r.baseVal.value;
+        const circumference = radius * 2 * Math.PI;
+        const offset = circumference - (this.percentage / 100) * circumference;
+        this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
+        this.indicator.style.strokeDashoffset = `${offset}`;
+    }
+    render() {
+        return (h("div", { key: '585f31918309719acad14e1b01121be9a8c1cd89', part: "base", class: "progress-ring" }, h("svg", { key: '5c039de9145c4c43f52e2787d39aaf3710c30f76', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '8b8ae8deb553e5e34a916fedfd7b5378ab47de9f', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'aab242e5b4797bdbcf75146e55a73f080d8742c1', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: 'dea1cbc19b910dd1d07a10a56ae6b1700b0d5113', part: "label", class: "progress-ring__label" }, h("slot", { key: 'a00bf6f710f3e65dfc1bc645a808aba2fabe0d40' }))));
+    }
+    static get is() { return "six-progress-ring"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-progress-ring.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-progress-ring.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the progress ring in pixels."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "128"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The stroke width of the progress ring in pixels."
+                },
+                "attribute": "stroke-width",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "percentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current progress percentage, 0 - 100."
+                },
+                "attribute": "percentage",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "percentage",
+                "methodName": "handlePercentageChange"
+            }];
     }
-    const radius = this.indicator.r.baseVal.value;
-    const circumference = radius * 2 * Math.PI;
-    const offset = circumference - (this.percentage / 100) * circumference;
-    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
-    this.indicator.style.strokeDashoffset = `${offset}`;
-  }
-  render() {
-    return (h("div", { part: "base", class: "progress-ring" }, h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { part: "label", class: "progress-ring__label" }, h("slot", null))));
-  }
-  static get is() { return "six-progress-ring"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-progress-ring.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-progress-ring.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the progress ring in pixels."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "128"
-      },
-      "strokeWidth": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The stroke width of the progress ring in pixels."
-        },
-        "attribute": "stroke-width",
-        "reflect": false,
-        "defaultValue": "4"
-      },
-      "percentage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current progress percentage, 0 - 100."
-        },
-        "attribute": "percentage",
-        "reflect": false
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "percentage",
-        "methodName": "handlePercentageChange"
-      }];
-  }
 }
 //# sourceMappingURL=six-progress-ring.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-progress-ring.js","sourceRoot":"","sources":["../../../src/components/six-progress-ring/six-progress-ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,eAAe;;gBAIX,GAAG;uBAGI,CAAC;;;EAMvB,sBAAsB;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE;MACrB,OAAO;KACR;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;EACtD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;MACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;QACnE,cACE,KAAK,EAAC,sBAAsB,kBACd,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB;QAEF,cACE,GAAG,EAAE,CAAC,EAAoB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EACpD,KAAK,EAAC,0BAA0B,kBAClB,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,CACE;MAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;QAC7C,eAAQ,CACH,CACH,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  indicator: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage: number;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  updateProgress() {\n    if (!this.indicator.r) {\n      return;\n    }\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el: SVGCircleElement) => (this.indicator = el)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-progress-ring.js","sourceRoot":"","sources":["../../../src/components/six-progress-ring/six-progress-ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,eAAe;;oBAIX,GAAG;2BAGI,CAAC;0BAGF,CAAC;;IAGtB,sBAAsB;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;;QACpB,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,CAAC,KAAI,IAAI;YAAE,OAAO;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;QAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;QAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;YACpC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;gBACnE,+DACE,KAAK,EAAC,sBAAsB,kBACd,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB;gBAEF,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACtD,KAAK,EAAC,0BAA0B,kBAClB,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,CACE;YAEN,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;gBAC7C,8DAAQ,CACH,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  private indicator?: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage = 0;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  private updateProgress() {\n    if (this.indicator?.r == null) return;\n\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el) => (this.indicator = el as SVGCircleElement)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {