@six-group/ui-library 3.0.0-beta.1.7

package/dist/cjs/six-progress-bar.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+
+const sixProgressBarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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%}}";
+
+let SixProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The progress bar's percentage, 0 to 100. */
+    this.percentage = 0;
+    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+    this.indeterminate = false;
+  }
+  render() {
+    return (index.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 }, index.h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.percentage}%`,
+      } }, !this.indeterminate && (index.h("span", { part: "label", class: "progress-bar__label" }, index.h("slot", null))))));
+  }
+};
+SixProgressBar.style = sixProgressBarCss;
+
+exports.six_progress_bar = SixProgressBar;

package/dist/cjs/six-progress-ring.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+
+const sixProgressRingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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)}";
+
+let SixProgressRing = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The size of the progress ring in pixels. */
+    this.size = 128;
+    /** The stroke width of the progress ring in pixels. */
+    this.strokeWidth = 4;
+  }
+  handlePercentageChange() {
+    this.updateProgress();
+  }
+  componentDidLoad() {
+    this.updateProgress();
+  }
+  updateProgress() {
+    if (!this.indicator.r) {
+      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 (index.h("div", { part: "base", class: "progress-ring" }, index.h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, index.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 }), index.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 })), index.h("span", { part: "label", class: "progress-ring__label" }, index.h("slot", null))));
+  }
+  static get watchers() { return {
+    "percentage": ["handlePercentageChange"]
+  }; }
+};
+SixProgressRing.style = sixProgressRingCss;
+
+exports.six_progress_ring = SixProgressRing;

package/dist/cjs/six-radio.cjs.entry.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+
+const sixRadioCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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;
+let SixRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixBlur = index.createEvent(this, "six-radio-blur", 7);
+    this.sixChange = index.createEvent(this, "six-radio-change", 7);
+    this.sixFocus = index.createEvent(this, "six-radio-focus", 7);
+    this.inputId = `radio-${++id}`;
+    this.labelId = `radio-label-${id}`;
+    this.hasFocus = false;
+    /** Set to true to disable the radio. */
+    this.disabled = false;
+    /** Set to true to draw the radio in a checked state. */
+    this.checked = false;
+    /**
+     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
+     * provided by the `setCustomValidity` method.
+     */
+    this.invalid = false;
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
+  }
+  handleCheckedChange() {
+    if (this.checked) {
+      this.getSiblingRadios().map((radio) => (radio.checked = false));
+    }
+    if (this.input) {
+      this.input.checked = this.checked;
+      this.sixChange.emit();
+    }
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+  componentWillLoad() {
+    this.defaultState = this.checked;
+  }
+  /** Sets focus on the radio. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.checked = this.defaultState;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  getAllRadios() {
+    const form = this.host.closest('six-form, 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);
+  }
+  handleClick() {
+    this.checked = this.input.checked;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleKeyDown(event) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.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().map((radio) => (radio.checked = false));
+      radios[index].setFocus();
+      radios[index].checked = true;
+      event.preventDefault();
+    }
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  render() {
+    return (index.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 }, index.h("span", { part: "control", class: "radio__control" }, index.h("span", { part: "checked-icon", class: "radio__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { fill: "currentColor" }, index.h("circle", { cx: "8", cy: "8", r: "5" }))))), index.h("input", { ref: (el) => (this.input = 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 })), index.h("span", { part: "label", id: this.labelId, class: "radio__label" }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"]
+  }; }
+};
+SixRadio.style = sixRadioCss;
+
+exports.six_radio = SixRadio;

package/dist/cjs/six-range.cjs.entry.js

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const formControl = require('./form-control-9e4dffd1.js');
+const slot = require('./slot-8abe833c.js');
+const eventListeners = require('./event-listeners-4a8d66d5.js');
+
+const sixRangeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:\"*\"}.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;color:var(--six-color-danger-800);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;
+let SixRange = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixChange = index.createEvent(this, "six-range-change", 7);
+    this.sixBlur = index.createEvent(this, "six-range-blur", 7);
+    this.sixFocus = index.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.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new eventListeners.EventListeners();
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasLabelSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasTooltip = false;
+    /** The input's name attribute. */
+    this.name = '';
+    /** The range's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The range's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** The input's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** Set to true to disable the input. */
+    this.disabled = false;
+    /**
+     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
+     * provided by the `setCustomValidity` method.
+     */
+    this.invalid = false;
+    /** The input's min attribute. */
+    this.min = 0;
+    /** The input's max attribute. */
+    this.max = 100;
+    /** The input's step attribute. */
+    this.step = 1;
+    /** The preferred placedment of the tooltip. */
+    this.tooltip = 'top';
+    /** A function used to format the tooltip's value. */
+    this.tooltipFormatter = (value) => value.toString();
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** default value the slider will be reverted to when reset is executed */
+    this.defaultValue = 0;
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  handleValueChange() {
+    if (this.input) {
+      this.input.value = this.value;
+      this.calculateColorRunnableTrack();
+    }
+    // In rare cases, the watcher may be called before render so we need to make sure the input exists
+    this.invalid = this.input ? !this.input.checkValidity() : false;
+  }
+  connectedCallback() {
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  componentWillLoad() {
+    if (this.value === undefined || this.value === null)
+      this.value = this.min;
+    if (this.value < this.min)
+      this.value = this.min;
+    if (this.value > this.max)
+      this.value = this.max;
+    this.defaultValue = this.value;
+    this.handleSlotChange();
+  }
+  componentDidLoad() {
+    this.syncTooltip();
+    this.calculateColorRunnableTrack();
+    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
+    this.eventListeners.add(this.input, 'invalid', (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = this.input.validationMessage;
+      }
+      event.preventDefault();
+    });
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Sets focus on the input. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.customErrorText = '';
+    this.customValidation = message !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleInput() {
+    this.value = Number(this.input.value);
+    this.sixChange.emit();
+    requestAnimationFrame(() => this.syncTooltip());
+    requestAnimationFrame(() => this.calculateColorRunnableTrack());
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasTooltip = false;
+    this.sixBlur.emit();
+    this.resizeObserver.unobserve(this.input);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.hasTooltip = true;
+    this.sixFocus.emit();
+    this.resizeObserver.observe(this.input);
+  }
+  handleSlotChange() {
+    this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = slot.hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
+  }
+  handleTouchStart() {
+    this.setFocus();
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  syncTooltip() {
+    if (this.tooltip !== 'none') {
+      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
+      const inputWidth = this.input.offsetWidth;
+      const tooltipWidth = this.output.offsetWidth;
+      const thumbSize = getComputedStyle(this.input).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`;
+    }
+  }
+  /**
+   * For Firefox this functionality is not needed because it is supported by standard CSS.
+   */
+  calculateColorRunnableTrack() {
+    if (!this.isFirefox()) {
+      const value = parseInt(this.input.value, 10);
+      const min = parseInt(this.input.min, 10);
+      const max = parseInt(this.input.max, 10);
+      const percent = Math.ceil(((value - min) / (max - min)) * 100);
+      this.input.style.background =
+        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
+          percent +
+          '%, var(--six-color-web-rock-300) ' +
+          percent +
+          '%)';
+    }
+  }
+  isFirefox() {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  }
+  render() {
+    return (index.h(formControl.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.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, index.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 }, index.h("input", { part: "input", ref: (el) => (this.input = 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' && (index.h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["handleLabelChange"],
+    "errorText": ["handleLabelChange"],
+    "helpText": ["handleLabelChange"],
+    "value": ["handleValueChange"]
+  }; }
+};
+SixRange.style = sixRangeCss;
+
+exports.six_range = SixRange;

package/dist/cjs/six-root.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.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}";
+
+let SixRoot = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.collapsedEvent = index.createEvent(this, "six-root-collapsed", 7);
+    /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */
+    this.breakpoint = 1024;
+    /** Defines whether the content section should be padded */
+    this.padded = true;
+    /** Defines the stage of the application*/
+    this.stage = null;
+    /** Defines the version of the application*/
+    this.version = '';
+    this.resizeObserver = new ResizeObserver(([host]) => {
+      const { width } = host.contentRect;
+      this.collapse = width < this.breakpoint;
+    });
+  }
+  handleCollapsed(collapsed) {
+    this.collapsedEvent.emit({ collapsed });
+  }
+  componentWillLoad() {
+    this.resizeObserver.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (index.h("host", { class: "six-root" }, index.h("header", { part: "header" }, this.stage && index.h("six-stage-indicator", { stage: this.stage }, this.version), index.h("slot", { name: "header" })), index.h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, index.h("set-attributes", { value: { open: !this.collapse } }, index.h("slot", { name: "left-sidebar" }))), index.h("main", { part: "main" }, index.h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, index.h("slot", { name: "main" })), index.h("div", { class: "six-root__footer" }, index.h("slot", { name: "footer" }))), index.h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, index.h("slot", { name: "right-sidebar" }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "collapse": ["handleCollapsed"]
+  }; }
+};
+SixRoot.style = sixRootCss;
+
+exports.six_root = SixRoot;

package/dist/cjs/six-search-field.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const executionControl = require('./execution-control-3bc9c7c4.js');
+const eventListeners = require('./event-listeners-4a8d66d5.js');
+
+const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
+
+let SixSearchField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.searchFieldChange = index.createEvent(this, "six-search-field-change", 7);
+    /** Debounce time in milliseconds, default is 300 ms */
+    this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+    /** Set to true to disable the input. */
+    this.disabled = false;
+    /** The input's value attribute. */
+    this.value = '';
+    /** Set to true to add a clear button when the input is populated. */
+    this.clearable = false;
+    this.eventListeners = new eventListeners.EventListeners();
+    this.handleInputChange = () => {
+      this.searchFieldChange.emit({ value: this.inputElement.value });
+    };
+  }
+  handleValueChange() {
+    if (this.inputElement) {
+      this.inputElement.value = this.value;
+    }
+  }
+  componentDidLoad() {
+    this.eventListeners.add(this.inputElement, 'six-input-input', executionControl.debounce(this.handleInputChange, this.debounce));
+    this.eventListeners.add(this.inputElement, 'keydown', (event) => {
+      if (event.key === 'Enter') {
+        // emit immediately
+        this.handleInputChange();
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    return (index.h("div", { class: "search-box" }, index.h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, index.h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), index.h("slot", null)));
+  }
+  static get watchers() { return {
+    "value": ["handleValueChange"]
+  }; }
+};
+SixSearchField.style = sixSearchFieldCss;
+
+exports.six_search_field = SixSearchField;