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

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

@@ -1,205 +1,205 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { F as FormControl } from './form-control-17478ad2.js';
-import { h as hasSlot } from './slot-5253e199.js';
-import { E as EventListeners } from './event-listeners-1bef934e.js';
+import { F as FormControl } from './form-control-24f446af.js';
+import { h as hasSlot } from './slot-6f3984c7.js';
+import { E as EventListeners } from './event-listeners-570a24ea.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) {
-    registerInstance(this, hostRef);
-    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.customErrorText = '';
-    this.customValidation = false;
-    this.eventListeners = new 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 = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = 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 (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.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, 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.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' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "label": ["handleLabelChange"],
-    "errorText": ["handleLabelChange"],
-    "helpText": ["handleLabelChange"],
-    "value": ["handleValueChange"]
-  }; }
-};
+let id = 0;
+let SixRange = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new 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 = hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = 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 (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.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, 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.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' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["handleLabelChange"],
+    "errorText": ["handleLabelChange"],
+    "helpText": ["handleLabelChange"],
+    "value": ["handleValueChange"]
+  }; }
+};
 SixRange.style = sixRangeCss;
 
 export { SixRange as six_range };

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

@@ -2,40 +2,40 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 
 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) {
-    registerInstance(this, hostRef);
-    this.collapsedEvent = 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 (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("set-attributes", { value: { open: !this.collapse } }, 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" }))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "collapse": ["handleCollapsed"]
-  }; }
-};
+let SixRoot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapsedEvent = 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 (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("set-attributes", { value: { open: !this.collapse } }, 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" }))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "collapse": ["handleCollapsed"]
+  }; }
+};
 SixRoot.style = sixRootCss;
 
 export { SixRoot as six_root };

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

@@ -1,50 +1,50 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
-import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-235f5126.js';
-import { E as EventListeners } from './event-listeners-1bef934e.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-1a60d709.js';
+import { E as EventListeners } from './event-listeners-570a24ea.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) {
-    registerInstance(this, hostRef);
-    this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
-    /** Debounce time in milliseconds, default is 300 ms */
-    this.debounce = 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();
-    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', 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 (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)));
-  }
-  static get watchers() { return {
-    "value": ["handleValueChange"]
-  }; }
-};
+let SixSearchField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
+    /** Debounce time in milliseconds, default is 300 ms */
+    this.debounce = 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();
+    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', 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 (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)));
+  }
+  static get watchers() { return {
+    "value": ["handleValueChange"]
+  }; }
+};
 SixSearchField.style = sixSearchFieldCss;
 
 export { SixSearchField as six_search_field };