@six-group/ui-library 4.1.2 → 4.2.1

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const sixProgressBarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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%}}";
+const SixProgressBarStyle0 = sixProgressBarCss;
 
 const SixProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressBar extends HTMLElement {
     constructor() {
@@ -11,14 +12,14 @@ const SixProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressBar e
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { part: "base", class: {
+        return (h("div", { key: '4833889d1cb6d61a5b8263bf3349ec55b0d3138b', 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: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '0e0bfb16e106f8bdf669e84df7ee1cf846a735e2', 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 style() { return sixProgressBarCss; }
+    static get style() { return SixProgressBarStyle0; }
 }, [1, "six-progress-bar", {
         "percentage": [2],
         "indeterminate": [4]

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

@@ -1 +1 @@
-{"file":"six-progress-bar.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,69BAA69B;;MCoB1+BA,gBAAc;;;;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,QACE,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,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,IAE1D,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,KAClB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,eAAQ,CACH,CACR,CACG,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressBar"],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n  --height: 16px;\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --label-color: var(--six-progress-label-color);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: var(--sl-border-radius-pill);\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-family: var(--six-font-sans);\n  font-size: 12px;\n  font-weight: var(--six-font-weight-normal);\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  line-height: var(--height);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 400ms width, 400ms background-color;\n  user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  position: absolute;\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -50%;\n    width: 50%;\n  }\n  75%,\n  100% {\n    left: 100%;\n    width: 50%;\n  }\n}\n","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","mappings":";;AAAA,MAAM,iBAAiB,GAAG,69BAA69B,CAAC;AACx/B,6BAAe,iBAAiB;;MCmBnBA,gBAAc;;;;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,QACE,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,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,IAE1D,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,KAClB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,eAAQ,CACH,CACR,CACG,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressBar"],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n  --height: 16px;\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --label-color: var(--six-progress-label-color);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: var(--sl-border-radius-pill);\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-family: var(--six-font-sans);\n  font-size: 12px;\n  font-weight: var(--six-font-weight-normal);\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  line-height: var(--height);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 400ms width, 400ms background-color;\n  user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  position: absolute;\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -50%;\n    width: 50%;\n  }\n  75%,\n  100% {\n    left: 100%;\n    width: 50%;\n  }\n}\n","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}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const sixProgressRingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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)}";
+const SixProgressRingStyle0 = sixProgressRingCss;
 
 const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing extends HTMLElement {
     constructor() {
@@ -28,12 +29,12 @@ const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing
         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))));
+        return (h("div", { key: 'fcfdeaf3f113028f9368d6c26323ed3680daf1dc', part: "base", class: "progress-ring" }, h("svg", { key: '55048e767285e998ed5bf34ada821abc7d3eae58', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63f9d87a8d310c1ea3dd40801eeb3232c0b4bb3d', 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: '34a46dadccdb2498bff8196a232570a761d6a468', 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: '55077cbe1488ae88aa86e06c97ae4948f7d5726a', part: "label", class: "progress-ring__label" }, h("slot", { key: '3e43561a4838f5f34f7196d713c2d6ddd4688965' }))));
     }
     static get watchers() { return {
         "percentage": ["handlePercentageChange"]
     }; }
-    static get style() { return sixProgressRingCss; }
+    static get style() { return SixProgressRingStyle0; }
 }, [1, "six-progress-ring", {
         "size": [2],
         "strokeWidth": [2, "stroke-width"],

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

@@ -1 +1 @@
-{"file":"six-progress-ring.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,kvBAAkvB;;MCmBhwBA,iBAAe;;;;;oBAIX,GAAG;2BAGI,CAAC;0BAGF,CAAC;;IAGtB,sBAAsB;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;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,IAAI,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;KACrD;IAED,MAAM;QACJ,QACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACnE,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,EAEF,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,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,EAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,IAC7C,eAAQ,CACH,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressRing"],"sources":["src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","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","mappings":";;AAAA,MAAM,kBAAkB,GAAG,kvBAAkvB,CAAC;AAC9wB,8BAAe,kBAAkB;;MCkBpBA,iBAAe;;;;;oBAIX,GAAG;2BAGI,CAAC;0BAGF,CAAC;;IAGtB,sBAAsB;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;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,IAAI,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;KACrD;IAED,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACpC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACnE,+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,EAEF,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,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,EAEN,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,IAC7C,8DAAQ,CACH,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixProgressRing"],"sources":["src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","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}

package/dist/components/six-radio.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { E as EventListeners } from './event-listeners.js';
 
 const sixRadioCss = ":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}";
+const SixRadioStyle0 = sixRadioCss;
 
 let id = 0;
 const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends HTMLElement {
@@ -99,19 +100,19 @@ const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends HTMLE
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { part: "base", class: {
+        return (h("label", { key: '13c5201fe152b2bc57a679422219af5ae19a46a9', 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", { part: "control", class: "radio__control" }, h("span", { part: "checked-icon", class: "radio__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { fill: "currentColor" }, h("circle", { cx: "8", cy: "8", r: "5" }))))), h("input", { 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", { part: "label", id: this.labelId, class: "radio__label" }, h("slot", null))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'd32606e4ac318f0de1afb0234d2dfc7dd00546ec', part: "control", class: "radio__control" }, h("span", { key: 'd12e68de71d9e49dc4b68813dc036ffa4e06fc96', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'b942c5b3f4c817484ce4a615913a4a9c01675562', viewBox: "0 0 16 16" }, h("g", { key: '316ed8598111b40d906c0b44ab7e4bfd2bf5cd1c', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '58a1547753ea79b7de3b4b90eeedfeb40ad7b6d6', fill: "currentColor" }, h("circle", { key: 'd225f3a06fdbb23a84eae34a6ba1b9184f55e627', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '8e3adc0aaba86098d423c5a7f484a20fe0b2a0cd', 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: 'b72458bbd8e5ca7a8109a5e85b1b5699a843d097', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '87652971c02c9aa7187a0f266283d9a475946f78' }))));
     }
     get host() { return this; }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
         "name": ["handleNameChange"]
     }; }
-    static get style() { return sixRadioCss; }
+    static get style() { return SixRadioStyle0; }
 }, [1, "six-radio", {
         "name": [1],
         "value": [513],

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

@@ -1 +1 @@
-{"file":"six-radio.js","mappings":"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","names":["SixRadio"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.radio__icon {\n  display: inline-flex;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","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","mappings":"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","names":["SixRadio"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.radio__icon {\n  display: inline-flex;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","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}

package/dist/components/six-range.js

@@ -4,7 +4,8 @@ import { h as hasSlot } from './slot.js';
 import { E as EventListeners } from './event-listeners.js';
 import { d as defineCustomElement$2 } from './six-error2.js';
 
-const sixRangeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:1px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:\"\";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}";
+const sixRangeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:2px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:\"\";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}";
+const SixRangeStyle0 = sixRangeCss;
 
 let id = 0;
 const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLElement {
@@ -101,6 +102,16 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
         this.eventListeners.removeAll();
     }
+    componentDidUpdate() {
+        const { min, max } = this.getMinMax();
+        this.syncTooltip(min, max, this.value);
+    }
+    getMinMax() {
+        var _a, _b;
+        const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+        return { min, max };
+    }
     /** Sets focus on the input. */
     async setFocus(options) {
         var _a;
@@ -174,7 +185,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
         }
     }
     render() {
-        return (h(FormControl, { 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", { part: "base", class: {
+        return (h(FormControl, { key: '4bd9c413aa318930b38a57e8f76906b5c25c0961', 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: '2a5cd3d1b1bcc77813aacc5eb2971a5ef0e27e0f', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -182,7 +193,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { 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: '448a9d9d41e466a09c4e00d9229b2971e99190b5', 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))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -193,7 +204,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
         "min": ["handleValueChange"],
         "max": ["handleValueChange"]
     }; }
-    static get style() { return sixRangeCss; }
+    static get style() { return SixRangeStyle0; }
 }, [1, "six-range", {
         "name": [1],
         "value": [1026],

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

@@ -1 +1 @@
-{"file":"six-range.js","mappings":"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","names":["SixRange"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-range.js","mappings":"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","names":["SixRange"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 2px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentDidUpdate() {\n    const { min, max } = this.getMinMax();\n    this.syncTooltip(min, max, this.value);\n  }\n\n  private getMinMax() {\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    return { min, max };\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-root.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-stage-indicator2.js';
 
 const sixRootCss = ":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";
+const SixRootStyle0 = sixRootCss;
 
 const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLElement {
     constructor() {
@@ -14,10 +15,10 @@ const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLEle
         this.version = '';
     }
     render() {
-        return (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { name: "left-sidebar" })), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
+        return (h("host", { key: 'd004ad641b82d656ccbb7b788a04d8befab64b47', class: "six-root" }, h("header", { key: 'cce9488ed3c0778120fb1c0ce040a74b8c3b18d6', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: 'b5810a66f91e003d83ee9196e0c955b52773794a', name: "header" })), h("nav", { key: '8d7aa97373ddb660d7a6e5ab1b860736726b9ee7', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'ab612b588dedf3e3098cd6f423078ef2fdc83bed', name: "left-sidebar" })), h("main", { key: '2c6e91c192a5346302d6d0be19a4e43d190cf5d4', part: "main" }, h("div", { key: 'bb52732ddf5462b1d536444f0f584fa48ba5ee55', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '23db6d1c2426497e40e91ef7d7898f37e1977465', name: "main" })), h("div", { key: 'f083d6d754ff7a502efe8f20663a423075f85e9f', class: "six-root__footer" }, h("slot", { key: 'd902e6b083181958e12f8f808b2dc98e2bb99dfd', name: "footer" }))), h("nav", { key: '05b158597d15d8536e8eb8ccc66f0ff971ebdc92', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3a9168dbd5039344e948c22c822ca7f65648cb1f', name: "right-sidebar" }))));
     }
     get host() { return this; }
-    static get style() { return sixRootCss; }
+    static get style() { return SixRootStyle0; }
 }, [1, "six-root", {
         "padded": [4],
         "stage": [1],

package/dist/components/six-root.js.map

@@ -1 +1 @@
-{"file":"six-root.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCmBxlBA,SAAO;;;;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,QACE,YAAM,KAAK,EAAC,UAAU,IACpB,cAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,YAAM,IAAI,EAAC,MAAM,IACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <slot name=\"left-sidebar\" />\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-root.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,klBAAklB,CAAC;AACtmB,sBAAe,UAAU;;MCkBZA,SAAO;;;;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,QACE,6DAAM,KAAK,EAAC,UAAU,IACpB,+DAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <slot name=\"left-sidebar\" />\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-search-field.js

@@ -6,6 +6,7 @@ import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-input2.js';
 
 const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
+const SixSearchFieldStyle0 = sixSearchFieldCss;
 
 const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField extends HTMLElement {
     constructor() {
@@ -46,12 +47,12 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { class: "search-box" }, h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", null)));
+        return (h("div", { key: '3083fe949be687f4540c7ee0115d9befc4faa90d', class: "search-box" }, h("six-input", { key: 'addaf6279a2473b3c44d2284c11a4e822c0883fe', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'd6953c6b87cbf8f6ed1fb1625aa510857ccfb421', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'd7f0a5e0974d5e0cbe8b0e120999804be0299aef' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
-    static get style() { return sixSearchFieldCss; }
+    static get style() { return SixSearchFieldStyle0; }
 }, [1, "six-search-field", {
         "placeholder": [1],
         "debounce": [514],

package/dist/components/six-search-field.js.map

@@ -1 +1 @@
-{"file":"six-search-field.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,oNAAoN;;MCoBjOA,gBAAc;;;;;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;SACF,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;YACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,eAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-search-field.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,oNAAoN,CAAC;AAC/O,6BAAe,iBAAiB;;MCmBnBA,gBAAc;;;;;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;SACF,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;YACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,YAAY,IACrB,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,iEAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-select.js

@@ -127,6 +127,7 @@ const translation = {
 };
 
 const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host,.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.display__values{display:flex;flex:1 1 auto;align-items:center;user-select:none;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.display__values::-webkit-scrollbar{width:0;height:0}.display__values-values{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display__values-and-counter{display:flex;overflow:hidden}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.placeholder{color:var(--six-input-placeholder-color)}.select--disabled .placeholder{color:var(--six-input-placeholder-color-disabled)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .display__values{margin:0 0 0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .display__values{margin:0 0 0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .display__values{margin:0 0 0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{width:100%}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}.selection-container--border{border-bottom:solid var(--six-border-width) var(--six-menu-divider-color);padding-top:var(--six-spacing-xx-small);padding-bottom:var(--six-spacing-xx-small)}.display-value--hidden{display:none}.overflow-count{color:var(--six-color-web-rock-600);padding-left:var(--six-spacing-x-small)}.overflow-count-hidden{display:none}.separator--hidden{display:none}.select-all{border-top:1px solid var(--six-color-web-rock-300);display:flex;justify-content:end}";
+const SixSelectStyle0 = sixSelectCss;
 
 let id = 0;
 const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTMLElement {
@@ -514,7 +515,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: 'cf4bbc5c8bdb3bd395b3223065ef7175f12fc750', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '5de198b2fc9ab517f9e6682394d881328f4da383', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
                 select: true,
                 'select--open': this.isOpen,
                 'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -529,20 +530,20 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: '731e50e52df65db450e852209b091698d024d533', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
                 select__box: true,
                 'select__box--line': this.line,
                 'select__box--autocomplete': this.autocomplete,
-            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.autocompleteInput = el), class: {
+            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: '4623418e42ad9d69891c582b7e88e2686b27eaa1', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { key: '1c53a3b59a3f09c6707709c36afdcd62e90de43a', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
                 'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { class: {
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: '65f3a8a73dd645a1098afc2b92104336b16fb80f', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: '80ac8179cb1fd6bbccd9525254511dde6908af5f', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '72f6447ad3dc14df92cf42b4a7b0984e970759c7', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
@@ -559,7 +560,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         "multiple": ["handleMultipleChange"],
         "value": ["handleValueChange"]
     }; }
-    static get style() { return sixSelectCss; }
+    static get style() { return SixSelectStyle0; }
 }, [1, "six-select", {
         "multiple": [4],
         "selectAllButton": [4, "select-all-button"],