@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

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

@@ -7,15 +7,34 @@ import { h, Host } from "@stencil/core";
  */
 export class SixPicto {
     constructor() {
+        /**
+         * Defines the size of the icon.
+         */
         this.size = 'medium';
+        this.svgContent = null;
     }
-    render() {
+    async componentWillLoad() {
         var _a;
         const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h(Host, { key: 'adec8f35b8501390c0831495ea9f915f6616aa04' }, h("div", { key: '92bcee923694c027ed93554d4d93924b58803b82', part: "icon", class: {
-                [`is-size-${this.size}`]: typeof this.size != null || this.size.trim() !== '',
-                [`${iconName}`]: true,
-            } })));
+        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: '5b88e27072aa32496f6eba5c863abd8818c6ba15' }, h("div", { key: '533593aad450d6aab0fe12e4c8ba1d883386906e', part: "icon", class: {
+                [`is-size-${this.size}`]: true,
+            }, innerHTML: this.svgContent || '' })));
     }
     static get is() { return "six-picto"; }
     static get encapsulation() { return "shadow"; }
@@ -45,12 +64,19 @@ export class SixPicto {
                     "tags": [],
                     "text": "Defines the size of the icon."
                 },
+                "getter": false,
+                "setter": false,
                 "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,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,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"]}
+{"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;IALrB;QAQE;;WAEG;QACK,SAAI,GAAwF,QAAQ,CAAC;QAEpG,eAAU,GAAkB,IAAI,CAAC;KA+B3C;IA7BC,KAAK,CAAC,iBAAiB;;QACrB,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;QAC7C,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YACf,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

@@ -6,6 +6,17 @@
   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.

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

@@ -13,16 +13,18 @@ import { h } from "@stencil/core";
  */
 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: '5361da7a78cfcaa6375e078da88209dcd725d832', part: "base", class: {
+        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: 'a3dea20c3afea5be2c6c02adf9e6f98cdb038cbb', part: "indicator", class: "progress-bar__indicator", style: {
+            }, 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", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
+            } }, !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"; }
@@ -52,6 +54,8 @@ export class SixProgressBar {
                     "tags": [],
                     "text": "The progress bar's percentage, 0 to 100."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "percentage",
                 "reflect": false,
                 "defaultValue": "0"
@@ -70,6 +74,8 @@ export class SixProgressBar {
                     "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,
                 "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -6,6 +6,17 @@
   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.

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

@@ -12,8 +12,11 @@ import { h } from "@stencil/core";
  */
 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() {
@@ -33,7 +36,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: 'e502ccf39d3b246d03122b446949ee8380e1a2fa', part: "base", class: "progress-ring" }, h("svg", { key: 'd37581863e5a67e9f8a9cd058954581ee7e86a4a', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '022eeb124e217d93479cf7ead2cabb9169b9afd4', 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: 'bc0fbfc9f1c872243ae2169d6412db47fb554e19', 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: '9320211edc9c0b9b24124ffc7ffdac9d6d2f86a7', part: "label", class: "progress-ring__label" }, h("slot", { key: 'e7c3ce7e12a7691e461b73e6cbd2912dde27ac75' }))));
+        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"; }
@@ -63,6 +66,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The size of the progress ring in pixels."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "128"
@@ -81,6 +86,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The stroke width of the progress ring in pixels."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "stroke-width",
                 "reflect": false,
                 "defaultValue": "4"
@@ -99,6 +106,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The current progress percentage, 0 - 100."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "percentage",
                 "reflect": false,
                 "defaultValue": "0"

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;;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"]}
+{"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

@@ -6,6 +6,17 @@
   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;
 }

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

@@ -19,6 +19,17 @@ export class SixRadio {
         this.inputId = `radio-${++id}`;
         this.labelId = `radio-label-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        /** The radio's name attribute. */
+        this.name = '';
+        /** The radio's value attribute. */
+        this.value = 'on';
+        /** Set to true to disable the radio. */
+        this.disabled = false;
+        /** Set to true to draw the radio in a checked state. */
+        this.checked = false;
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
         this.handleClick = () => {
             if (this.nativeInput != null) {
                 this.checked = this.nativeInput.checked;
@@ -55,12 +66,6 @@ export class SixRadio {
             event.preventDefault();
             (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        this.hasFocus = false;
-        this.name = '';
-        this.value = 'on';
-        this.disabled = false;
-        this.checked = false;
-        this.invalid = false;
     }
     handleCheckedChange() {
         if (this.checked) {
@@ -103,12 +108,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '11d5d7c460cf62b2fc73435137998c3b424ab58f', part: "base", class: {
+        return (h("label", { key: 'cdb722e8b78cf02f527d97b3dab6f0679b333c21', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'e6ca5e0308ed109262b995b9831f32f5c5829cbc', part: "control", class: "radio__control" }, h("span", { key: 'c201309a8ef4def676aa48cf9dd66b94da28db10', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '0e003d8db64fb73c54e95fffb9005d434d2b114e', viewBox: "0 0 16 16" }, h("g", { key: '374a33afe42003445cb91630754007f7057ff755', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2b85fcbdf694e18c9234819a0a20ffd793be0102', fill: "currentColor" }, h("circle", { key: '45842bd37b3dcea164b972c9ff6e461fc866536d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '924cbd7890627bbf79201b68a989f894e26d9579', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'f00e3fbac022d2be55117448df3e8ff908dd4cd5', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '0fa728701561580e0d06f0568a001d1d234ed867' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '9c627a113fe27c340b7f6162d9bde328220c8960', part: "control", class: "radio__control" }, h("span", { key: '2ce65408f6c88cb7396c480eba0cc2dd663a3c85', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'f4aac67ee8b4a5fb2af26305799b6648e496941e', viewBox: "0 0 16 16" }, h("g", { key: 'f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '7ffa14023971330ae34e041871c0db912789999a', fill: "currentColor" }, h("circle", { key: '10d6f37d1227677ba8044a8bffd89f8828e54e0d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '55ae32be4a36646c17d1238e486df0a483db2650', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '08128b78c44c561e9dc97f840bacf46059c2483b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '9dd8bcf11566bd74d7b8e91a71cd276947562426' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +143,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "The radio's name attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -156,6 +163,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "The radio's value attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "'on'"
@@ -174,6 +183,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "Set to true to disable the radio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -192,6 +203,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "Set to true to draw the radio in a checked state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -210,6 +223,8 @@ export class SixRadio {
                     "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-radio/six-radio.js.map

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

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

@@ -6,6 +6,17 @@
   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;
+}
+
 .form-control .form-control__label {
   display: none;
 }

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

@@ -24,6 +24,37 @@ export class SixRange {
         this.helpTextId = `input-help-text-${id}`;
         this.errorTextId = `input-error-text-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasErrorTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasTooltip = false;
+        /** The input's name attribute. */
+        this.name = '';
+        /** The input's value attribute. */
+        this.value = 0;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The range's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to disable the input. */
+        this.disabled = 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;
+        /** The input's min attribute. */
+        this.min = 0;
+        /** The input's max attribute. */
+        this.max = 100;
+        /** The input's step attribute. */
+        this.step = 1;
+        /** The preferred placedment of the tooltip. */
+        this.tooltip = 'top';
+        /** A function used to format the tooltip's value. */
+        this.tooltipFormatter = (value) => value.toString();
         this.handleInput = () => {
             if (this.nativeInput != null) {
                 this.update(parseFloat(this.nativeInput.value));
@@ -58,25 +89,6 @@ export class SixRange {
         this.handleTouchStart = () => {
             this.setFocus();
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasErrorTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasTooltip = false;
-        this.name = '';
-        this.value = 0;
-        this.required = false;
-        this.helpText = '';
-        this.disabled = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.tooltip = 'top';
-        this.tooltipFormatter = (value) => value.toString();
     }
     handleLabelChange() {
         this.handleSlotChange();
@@ -188,7 +200,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
+        return (h(FormControl, { key: '0f53d7ccd1af680cc40ec8de87960b243c33a3be', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'd51cc4d2afde55aed2941878912eb3f741c89cf1', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -196,7 +208,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: 'bfa94717d2ad6e8b5e7b513aa49697b1232e0502', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '4db780c67679a9e6d36ead8ae23e5ba6ead2a5ec', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }
@@ -226,6 +238,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's name attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -244,6 +258,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's value attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
@@ -262,6 +278,8 @@ export class SixRange {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -280,6 +298,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The range's help text. Alternatively, you can use the help-text slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -298,6 +318,8 @@ export class SixRange {
                     "tags": [],
                     "text": "Set to true to disable the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -316,6 +338,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The label text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -334,6 +358,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -352,6 +378,8 @@ export class SixRange {
                     "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
             },
@@ -369,6 +397,8 @@ export class SixRange {
                     "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"
@@ -387,6 +417,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's min attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
@@ -405,6 +437,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's max attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
@@ -423,6 +457,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's step attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
@@ -441,6 +477,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The preferred placedment of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -459,6 +497,8 @@ export class SixRange {
                     "tags": [],
                     "text": "A function used to format the tooltip's value."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(value: number) => value.toString()"
             }
         };