@six-group/ui-library 0.0.0-insider.0052ba1

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

@@ -0,0 +1,61 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @part icon - The component's icon wrapper.
+ */
+export class SixPicto {
+    constructor() {
+        /**
+         * Defines the size of the icon.
+         */
+        this.size = 'medium';
+    }
+    render() {
+        var _a;
+        const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
+        return (h(Host, { key: 'ed06500ac52374ead53dbb7012ee1b4b07d21b25' }, h("div", { key: '1f134c2254d4c3659e66b1a0c79556fb8131220d', part: "icon", class: {
+                [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
+                [`${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",
+                "attribute": "size",
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-picto.js.map

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

@@ -0,0 +1 @@
+{"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,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;IALrB;QAQE;;WAEG;QACK,SAAI,GAAwF,QAAQ,CAAC;KAgB9G;IAdC,MAAM;;QACJ,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;QAC7C,OAAO,CACL,EAAC,IAAI;YACH,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;oBAC7E,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,IAAI;iBACtB,GACD,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, 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\n          part=\"icon\"\n          class={{\n            [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',\n            [`${iconName}`]: true,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,71 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/**
+ * @prop --height: The progress bar's height.
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ * @prop --label-color: The label color.
+ */
+:host {
+  --height: 16px;
+  --track-color: var(--six-progress-track-color);
+  --indicator-color: var(--six-progress-indicator-color);
+  --label-color: var(--six-progress-label-color);
+  display: block;
+}
+
+.progress-bar {
+  position: relative;
+  background-color: var(--track-color);
+  height: var(--height);
+  border-radius: var(--sl-border-radius-pill);
+  overflow: hidden;
+}
+
+.progress-bar__indicator {
+  height: 100%;
+  font-family: var(--six-font-sans);
+  font-size: 12px;
+  font-weight: var(--six-font-weight-normal);
+  background-color: var(--indicator-color);
+  color: var(--label-color);
+  text-align: center;
+  line-height: var(--height);
+  white-space: nowrap;
+  overflow: hidden;
+  transition: 400ms width, 400ms background-color;
+  user-select: none;
+}
+
+.progress-bar--indeterminate .progress-bar__indicator {
+  position: absolute;
+  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+  }
+  75%, 100% {
+    left: 100%;
+    width: 50%;
+  }
+}

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

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export class SixProgressBar {
+    constructor() {
+        /** The progress bar's percentage, 0 to 100. */
+        this.percentage = 0;
+        /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+        this.indeterminate = false;
+    }
+    render() {
+        return (h("div", { key: 'e11c3e9f83321a55170e04e84ab63c2e8b9f12a7', 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: '9c8b4a3f5ada54163272cbd7e8cf9e7cb90dc39b', part: "indicator", class: "progress-bar__indicator", style: {
+                width: `${this.percentage}%`,
+            } }, !this.indeterminate && (h("span", { key: '16be9dda6192ecf33efb192b23694cc006ceb4fd', part: "label", class: "progress-bar__label" }, h("slot", { key: '1e102597d1ec71a54fecb87f336aa711fddd8558' }))))));
+    }
+    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",
+                "attribute": "percentage",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress bar's percentage, 0 to 100."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-progress-bar.js.map

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

@@ -0,0 +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;IAL3B;QAME,+CAA+C;QACvC,eAAU,GAAG,CAAC,CAAC;QAEvB,sHAAsH;QAC9G,kBAAa,GAAG,KAAK,CAAC;KA+B/B;IA7BC,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

@@ -0,0 +1,63 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/**
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ */
+:host {
+  --track-color: var(--six-progress-track-color);
+  --indicator-color: var(--six-progress-indicator-color);
+  display: inline-flex;
+}
+
+.progress-ring {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.progress-ring__image {
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+
+.progress-ring__track {
+  stroke: var(--track-color);
+}
+
+.progress-ring__indicator {
+  stroke: var(--indicator-color);
+  transition: 0.35s stroke-dashoffset, 0.35s stroke;
+}
+
+.progress-ring__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  user-select: none;
+  font-family: var(--six-font-family);
+}

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

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @part base - The component's base wrapper.
+ * @part label - The progress ring label.
+ */
+export class SixProgressRing {
+    constructor() {
+        /** The size of the progress ring in pixels. */
+        this.size = 128;
+        /** The stroke width of the progress ring in pixels. */
+        this.strokeWidth = 4;
+        /** The current progress percentage, 0 - 100. */
+        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: '6f48ef171c32eef14162bb15d53befc7bf30f923', part: "base", class: "progress-ring" }, h("svg", { key: 'b1479eec3a5dbabdb39716484c58396a09db1272', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: 'abb6fd5f35d514fe1580e02fd251774e107da5ce', 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: 'ca3fb1650516df81c8757594a0ce0d62d82febd3', 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: 'c9b746f63f7c8bb0b325397d0344f6d82b8e3c0d', part: "label", class: "progress-ring__label" }, h("slot", { key: '905b3a001f4d95c31e80e5d74ecd29d0ec59992a' }))));
+    }
+    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",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the progress ring in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "128"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "attribute": "stroke-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The stroke width of the progress ring in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "percentage": {
+                "type": "number",
+                "attribute": "percentage",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current progress percentage, 0 - 100."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    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

@@ -0,0 +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;IAL5B;QAQE,+CAA+C;QACvC,SAAI,GAAG,GAAG,CAAC;QAEnB,uDAAuD;QAC/C,gBAAW,GAAG,CAAC,CAAC;QAExB,gDAAgD;QACxC,eAAU,GAAG,CAAC,CAAC;KAsDxB;IAnDC,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

@@ -0,0 +1,95 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:host {
+  display: inline-block;
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--six-font-family);
+  font-size: var(--six-input-font-size-medium);
+  font-weight: var(--six-input-font-weight);
+  color: var(--six-input-color);
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.radio__icon {
+  display: inline-flex;
+  width: var(--six-selection-control-toggle-size);
+  height: var(--six-selection-control-toggle-size);
+}
+.radio__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.radio__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--six-selection-control-toggle-size);
+  height: var(--six-selection-control-toggle-size);
+  border: solid var(--six-border-width) var(--six-input-border-color);
+  border-radius: 50%;
+  background-color: var(--six-input-background-color);
+  color: transparent;
+  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;
+}
+.radio__control input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+  border-color: var(--six-input-border-color-hover);
+}
+
+.radio--checked .radio__control {
+  color: var(--six-selection-control-color);
+  border-color: var(--six-selection-control-color);
+}
+
+.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+  color: var(--six-input-border-color-focus);
+  border-color: var(--six-input-border-color-focus);
+}
+
+.radio--disabled {
+  cursor: not-allowed;
+  color: var(--six-input-color-disabled);
+}
+.radio--disabled .radio__control {
+  border-color: var(--six-input-border-color-disabled);
+}
+.radio--disabled.radio--checked .radio__control {
+  color: var(--six-selection-control-color-disabled);
+}
+
+.radio__label {
+  line-height: var(--six-selection-control-toggle-size);
+  margin-left: 0.5em;
+  user-select: none;
+}