@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,56 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @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}`]: 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",
+                "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"; }
+}
+//# 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;;oBAMiF,QAAQ;;IAE5G,MAAM;;QACJ,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;QAC7C,OAAO,CACL,EAAC,IAAI;YACH,WACE,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-picto/test/six-picto.spec.js

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

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

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

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

@@ -0,0 +1,60 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/**
+ * @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,80 @@
+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() {
+        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"
+            }
+        };
+    }
+}
+//# 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;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,OAAO,CACL,WACE,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,WACE,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,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;gBAC5C,eAAQ,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-bar/test/six-progress-bar.spec.js

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

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

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

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

@@ -0,0 +1,52 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/**
+ * @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,115 @@
+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() {
+        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", { 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,
+                "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;;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,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;YACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;gBACnE,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;gBAEF,cACE,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,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;gBAC7C,eAAQ,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-progress-ring/test/six-progress-ring.spec.js

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

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

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

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

@@ -0,0 +1,84 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+: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;
+}