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

package/dist/components/six-progress-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixProgressBar extends Components.SixProgressBar, HTMLElement {}
+export const SixProgressBar: {
+    prototype: SixProgressBar;
+    new (): SixProgressBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,45 @@
+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 SixProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.percentage = 0;
+        this.indeterminate = false;
+    }
+    render() {
+        return (h("div", { part: "base", class: {
+                'progress-bar': true,
+                'progress-bar--indeterminate': this.indeterminate,
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+                width: `${this.percentage}%`,
+            } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
+    }
+    static get style() { return sixProgressBarCss; }
+}, [1, "six-progress-bar", {
+        "percentage": [2],
+        "indeterminate": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixProgressBar$1);
+            }
+            break;
+    } });
+}
+
+const SixProgressBar = SixProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixProgressBar, defineCustomElement };
+
+//# sourceMappingURL=six-progress-bar.js.map

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

@@ -0,0 +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}

package/dist/components/six-progress-ring.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixProgressRing extends Components.SixProgressRing, HTMLElement {}
+export const SixProgressRing: {
+    prototype: SixProgressRing;
+    new (): SixProgressRing;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,63 @@
+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 SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 128;
+        this.strokeWidth = 4;
+        this.percentage = 0;
+    }
+    handlePercentageChange() {
+        this.updateProgress();
+    }
+    componentDidLoad() {
+        this.updateProgress();
+    }
+    updateProgress() {
+        var _a;
+        if (((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.r) == null)
+            return;
+        const radius = this.indicator.r.baseVal.value;
+        const circumference = radius * 2 * Math.PI;
+        const offset = circumference - (this.percentage / 100) * circumference;
+        this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
+        this.indicator.style.strokeDashoffset = `${offset}`;
+    }
+    render() {
+        return (h("div", { part: "base", class: "progress-ring" }, h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { part: "label", class: "progress-ring__label" }, h("slot", null))));
+    }
+    static get watchers() { return {
+        "percentage": ["handlePercentageChange"]
+    }; }
+    static get style() { return sixProgressRingCss; }
+}, [1, "six-progress-ring", {
+        "size": [2],
+        "strokeWidth": [2, "stroke-width"],
+        "percentage": [2]
+    }, undefined, {
+        "percentage": ["handlePercentageChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-progress-ring"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-progress-ring":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixProgressRing$1);
+            }
+            break;
+    } });
+}
+
+const SixProgressRing = SixProgressRing$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixProgressRing, defineCustomElement };
+
+//# sourceMappingURL=six-progress-ring.js.map

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

@@ -0,0 +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}

package/dist/components/six-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixRadio extends Components.SixRadio, HTMLElement {}
+export const SixRadio: {
+    prototype: SixRadio;
+    new (): SixRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-radio.js

@@ -0,0 +1,147 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+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}";
+
+let id = 0;
+const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixBlur = createEvent(this, "six-radio-blur", 7);
+        this.sixChange = createEvent(this, "six-radio-change", 7);
+        this.sixFocus = createEvent(this, "six-radio-focus", 7);
+        this.inputId = `radio-${++id}`;
+        this.labelId = `radio-label-${id}`;
+        this.eventListeners = new EventListeners();
+        this.handleClick = () => {
+            if (this.nativeInput != null) {
+                this.checked = this.nativeInput.checked;
+                this.sixChange.emit();
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (keyboardEvent) => {
+            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {
+                const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+                const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;
+                let index = radios.indexOf(this.host) + incr;
+                if (index < 0)
+                    index = radios.length - 1;
+                if (index > radios.length - 1)
+                    index = 0;
+                this.getAllRadios().forEach((radio) => (radio.checked = false));
+                radios[index].setFocus();
+                radios[index].checked = true;
+                radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));
+                keyboardEvent.preventDefault();
+            }
+        };
+        this.handleMouseDown = (event) => {
+            var _a;
+            // Prevent clicks on the label from briefly blurring the input
+            event.preventDefault();
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.hasFocus = false;
+        this.name = '';
+        this.value = 'on';
+        this.disabled = false;
+        this.checked = false;
+        this.invalid = false;
+    }
+    handleCheckedChange() {
+        if (this.checked) {
+            this.getSiblingRadios().forEach((radio) => (radio.checked = false));
+        }
+        if (this.nativeInput != null) {
+            this.nativeInput.checked = this.checked;
+        }
+    }
+    handleNameChange(name) {
+        if (this.nativeInput != null) {
+            this.nativeInput.name = name;
+        }
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-radio-change', 'change', this.host);
+        this.eventListeners.forward('six-radio-blur', 'blur', this.host);
+        this.eventListeners.forward('six-radio-focus', 'focus', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the radio. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the radio. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    getAllRadios() {
+        const form = this.host.closest('form') || document.body;
+        if (this.name === '')
+            return [];
+        return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
+    }
+    getSiblingRadios() {
+        return this.getAllRadios().filter((radio) => radio !== this.host);
+    }
+    render() {
+        return (h("label", { 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))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"],
+        "name": ["handleNameChange"]
+    }; }
+    static get style() { return sixRadioCss; }
+}, [1, "six-radio", {
+        "name": [1],
+        "value": [513],
+        "disabled": [4],
+        "checked": [1540],
+        "invalid": [516],
+        "hasFocus": [32],
+        "setFocus": [64],
+        "removeFocus": [64]
+    }, undefined, {
+        "checked": ["handleCheckedChange"],
+        "name": ["handleNameChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixRadio$1);
+            }
+            break;
+    } });
+}
+
+const SixRadio = SixRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixRadio, defineCustomElement };
+
+//# sourceMappingURL=six-radio.js.map

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

@@ -0,0 +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}

package/dist/components/six-range.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixRange extends Components.SixRange, HTMLElement {}
+export const SixRange: {
+    prototype: SixRange;
+    new (): SixRange;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-range.js

@@ -0,0 +1,251 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { F as FormControl } from './form-control.js';
+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%}";
+
+let id = 0;
+const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-range-change", 7);
+        this.sixBlur = createEvent(this, "six-range-blur", 7);
+        this.sixFocus = createEvent(this, "six-range-focus", 7);
+        this.inputId = `input-${++id}`;
+        this.labelId = `input-label-${id}`;
+        this.helpTextId = `input-help-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.handleInput = () => {
+            if (this.nativeInput != null) {
+                this.update(parseFloat(this.nativeInput.value));
+            }
+            requestAnimationFrame(() => {
+                this.sixChange.emit();
+            });
+        };
+        this.handleBlur = () => {
+            var _a;
+            this.hasFocus = false;
+            this.hasTooltip = false;
+            this.sixBlur.emit();
+            if (this.nativeInput != null) {
+                (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeInput);
+            }
+        };
+        this.handleFocus = () => {
+            var _a;
+            this.hasFocus = true;
+            this.hasTooltip = true;
+            this.sixFocus.emit();
+            if (this.nativeInput != null) {
+                (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.nativeInput);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+        };
+        this.handleTouchStart = () => {
+            this.setFocus();
+        };
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasErrorTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasTooltip = false;
+        this.name = '';
+        this.value = 0;
+        this.required = false;
+        this.helpText = '';
+        this.disabled = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.tooltip = 'top';
+        this.tooltipFormatter = (value) => value.toString();
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    handleValueChange() {
+        this.update();
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    componentWillLoad() {
+        this.update();
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        const nativeInput = this.nativeInput;
+        if (nativeInput == null) {
+            return;
+        }
+        this.update();
+        this.resizeObserver = new ResizeObserver(() => this.update());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the input. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    syncTooltip(min, max, value) {
+        if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
+            const percent = Math.max(0, (value - min) / (max - min));
+            const inputWidth = this.nativeInput.offsetWidth;
+            const tooltipWidth = this.output.offsetWidth;
+            const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');
+            const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+            this.output.style.transform = `translateX(${x})`;
+            this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+        }
+    }
+    isFirefox() {
+        return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    }
+    update(updateValue) {
+        var _a, _b;
+        if (updateValue != null) {
+            this.value = updateValue;
+        }
+        const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+        let value;
+        const parsedValue = parseFloat(this.value);
+        if (isNaN(parsedValue)) {
+            value = this.getDefaultValue(min, max);
+        }
+        else {
+            value = parsedValue;
+        }
+        if (this.nativeInput != null) {
+            // The value may have constraints, so we set the native control's
+            // value and sync it back to ensure it adheres to min, max, and step
+            // properly.
+            this.nativeInput.value = value.toString();
+            this.value = parseFloat(this.nativeInput.value);
+        }
+        else {
+            this.value = value;
+        }
+        this.calculateColorRunnableTrack(min, max, this.value);
+        this.syncTooltip(min, max, this.value);
+    }
+    /**
+     * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+     */
+    getDefaultValue(min, max) {
+        return max < min ? min : min + (max - min) / 2;
+    }
+    /**
+     * For Firefox this functionality is not needed because it is supported by standard CSS.
+     */
+    calculateColorRunnableTrack(min, max, value) {
+        if (!this.isFirefox() && this.nativeInput != null) {
+            const percent = Math.ceil(((value - min) / (max - min)) * 100);
+            this.nativeInput.style.background =
+                '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
+                    percent +
+                    '%, var(--six-color-web-rock-300) ' +
+                    percent +
+                    '%)';
+        }
+    }
+    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: {
+                range: true,
+                // States
+                'range--disabled': this.disabled,
+                'range--focused': this.hasFocus,
+                '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))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "label": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "helpText": ["handleLabelChange"],
+        "value": ["handleValueChange"],
+        "min": ["handleValueChange"],
+        "max": ["handleValueChange"]
+    }; }
+    static get style() { return sixRangeCss; }
+}, [1, "six-range", {
+        "name": [1],
+        "value": [1026],
+        "required": [4],
+        "helpText": [1, "help-text"],
+        "disabled": [4],
+        "label": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "invalid": [516],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "tooltip": [1],
+        "tooltipFormatter": [16],
+        "hasFocus": [32],
+        "hasHelpTextSlot": [32],
+        "hasErrorTextSlot": [32],
+        "hasLabelSlot": [32],
+        "hasTooltip": [32],
+        "setFocus": [64],
+        "removeFocus": [64]
+    }, undefined, {
+        "label": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "helpText": ["handleLabelChange"],
+        "value": ["handleValueChange"],
+        "min": ["handleValueChange"],
+        "max": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-range", "six-error"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-range":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixRange$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixRange = SixRange$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixRange, defineCustomElement };
+
+//# sourceMappingURL=six-range.js.map