@statistikzh/leu 0.10.0 → 0.11.1

package/dist/Menu.js

@@ -1,15 +1,10 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html } from 'lit';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
 
-var css_248z = css`:host,
-:host * {
-  box-sizing: border-box;
-}
-
-:host {
+var css_248z = css`:host {
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
 
@@ -139,7 +134,7 @@ class LeuMenu extends LeuElement {
     return html`<slot></slot>`;
   }
 }
-_defineProperty(LeuMenu, "styles", css_248z);
+_defineProperty(LeuMenu, "styles", [LeuElement.styles, css_248z]);
 _defineProperty(LeuMenu, "shadowRootOptions", {
   ...LeuElement.shadowRootOptions,
   delegatesFocus: true

package/dist/MenuItem.d.ts

@@ -37,6 +37,6 @@ export class LeuMenuItem extends LeuElement {
     _renderBeforeSlotDefault(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BA8Fa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;;GAUG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,2BAA8B;IAC9B,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,kFAKC;IACD,+CASC;CACF;gCA7MqD,0BAA0B;wBAC7C,KAAK"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BAyFa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;;GAUG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,2BAA8B;IAC9B,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,kFAKC;IACD,+CASC;CACF;gCAxMqD,0BAA0B;wBAC7C,KAAK"}

package/dist/MenuItem.js

@@ -1,14 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LeuIcon } from './Icon.js';
 
-var css_248z = css`:host,
-:host * {
-  box-sizing: border-box;
-}
-
-:host {
+var css_248z = css`:host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
   --background-active: var(--leu-color-func-cyan);
@@ -207,7 +202,7 @@ class LeuMenuItem extends LeuElement {
 _defineProperty(LeuMenuItem, "dependencies", {
   "leu-icon": LeuIcon
 });
-_defineProperty(LeuMenuItem, "styles", css_248z);
+_defineProperty(LeuMenuItem, "styles", [LeuElement.styles, css_248z]);
 /**
  * @internal
  */

package/dist/Pagination.d.ts

@@ -30,5 +30,5 @@ export class LeuPagination extends LeuElement {
     _handleKeyDown(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/Pagination.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
 import { LeuButton } from './Button.js';
@@ -6,7 +6,7 @@ import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-04d0dfa2.js';
+import './hasSlotController-d1f26756.js';
 
 var css_248z = css`:host {
   margin-top: 16px;
@@ -202,7 +202,7 @@ _defineProperty(LeuPagination, "dependencies", {
   "leu-icon": LeuIcon,
   "leu-visually-hidden": LeuVisuallyHidden
 });
-_defineProperty(LeuPagination, "styles", css_248z);
+_defineProperty(LeuPagination, "styles", [LeuElement.styles, css_248z]);
 /**
  * @internal
  */

package/dist/Popup.d.ts

@@ -32,5 +32,5 @@ export class LeuPopup extends LeuElement {
     handleAnchorChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 //# sourceMappingURL=Popup.d.ts.map

package/dist/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["Popup.js"],"names":[],"mappings":"wBAyCa,KAAK,GAAC,WAAW,GAAC,SAAS,GAAC,QAAQ,GAAC,cAAc,GAAC,YAAY,GAAC,MAAM,GAAC,YAAY,GAAC,UAAU,GAAC,OAAO,GAAC,aAAa,GAAC,WAAW;AAD9I;;GAEG;AAEH;;GAEG;AACH;IAGI,cAAoB;IACpB,oBAAwB;IACxB,cAAiB;IACjB,eAAkB;IAClB,gBAAmB;IAEnB,wBAAwB;IACxB,WADW,SAAS,CACM;IAE1B,0CAA0C;IAC1C,WADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACZ;IAE1B,0CAA0C;IAC1C,UADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACb;IACzB,qBAAqB;IACrB,wBAAwB;IAExB,mCAAmC;IACnC,QADW,MAAM,GAAG,WAAW,CACR;IAMzB,sCAcC;IAED;;OAEG;IACH,2BAEC;IACD,cAKC;IACD,aAIC;IACD,mBAiEC;IACD,2BAiBC;IACD,+CAOC;CACF;gCAvMqD,0BAA0B"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["Popup.js"],"names":[],"mappings":"wBAoCa,KAAK,GAAC,WAAW,GAAC,SAAS,GAAC,QAAQ,GAAC,cAAc,GAAC,YAAY,GAAC,MAAM,GAAC,YAAY,GAAC,UAAU,GAAC,OAAO,GAAC,aAAa,GAAC,WAAW;AAD9I;;GAEG;AAEH;;GAEG;AACH;IAGI,cAAoB;IACpB,oBAAwB;IACxB,cAAiB;IACjB,eAAkB;IAClB,gBAAmB;IAEnB,wBAAwB;IACxB,WADW,SAAS,CACM;IAE1B,0CAA0C;IAC1C,WADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACZ;IAE1B,0CAA0C;IAC1C,UADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACb;IACzB,qBAAqB;IACrB,wBAAwB;IAExB,mCAAmC;IACnC,QADW,MAAM,GAAG,WAAW,CACR;IAMzB,sCAcC;IAED;;OAEG;IACH,2BAEC;IACD,cAKC;IACD,aAIC;IACD,mBAiEC;IACD,2BAiBC;IACD,+CAOC;CACF;gCAlMqD,0BAA0B"}

package/dist/Popup.js

@@ -1,13 +1,8 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
 
-var css_248z = css`:host,
-:host * {
-  box-sizing: border-box;
-}
-
-:host {
+var css_248z = css`:host {
   --popup-font-regular: var(--leu-font-family-regular);
   --popup-font-black: var(--leu-font-family-black);
 
@@ -198,7 +193,7 @@ class LeuPopup extends LeuElement {
     `;
   }
 }
-_defineProperty(LeuPopup, "styles", css_248z);
+_defineProperty(LeuPopup, "styles", [LeuElement.styles, css_248z]);
 _defineProperty(LeuPopup, "shadowRootOptions", {
   ...LeuElement.shadowRootOptions,
   delegatesFocus: true

package/dist/Radio.d.ts

@@ -10,5 +10,5 @@ export class LeuRadio extends LeuElement {
     handleInput(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 //# sourceMappingURL=Radio.d.ts.map

package/dist/Radio.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html } from 'lit';
 
 var css_248z = css`:host {
@@ -130,7 +130,7 @@ class LeuRadio extends LeuElement {
     `;
   }
 }
-_defineProperty(LeuRadio, "styles", css_248z);
+_defineProperty(LeuRadio, "styles", [LeuElement.styles, css_248z]);
 /** @internal */
 _defineProperty(LeuRadio, "shadowRootOptions", {
   ...LeuElement.shadowRootOptions,

package/dist/RadioGroup.d.ts

@@ -16,5 +16,5 @@ export class LeuRadioGroup extends LeuElement {
     initializeIndex(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -162,7 +162,7 @@ class LeuRadioGroup extends LeuElement {
     `;
   }
 }
-_defineProperty(LeuRadioGroup, "styles", css_248z);
+_defineProperty(LeuRadioGroup, "styles", [LeuElement.styles, css_248z]);
 _defineProperty(LeuRadioGroup, "properties", {
   orientation: {
     type: String,

package/dist/Range.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @tagname leu-range
+ */
+export class LeuRange extends LeuElement {
+    defaultValue: number[];
+    min: number;
+    max: number;
+    step: number;
+    name: string;
+    label: string;
+    disabled: boolean;
+    multiple: boolean;
+    updated(): void;
+    _updateStyles(): void;
+    /**
+     * Sets the value of the underlying input element(s).
+     * The value has to be an array if "multiple" range is used.
+     * Otherwise it has to be a string.
+     * @param {string | Array} value
+     */
+    set value(value: string | any[]);
+    get value(): string | any[];
+    get valueAsArray(): number[];
+    get valueLow(): string | number;
+    get valueHigh(): string | number;
+    /**
+     * @returns {HTMLInputElement | null}
+     */
+    _getBaseInput(): HTMLInputElement | null;
+    /**
+     * @returns {HTMLInputElement | null}
+     */
+    _getGhostInput(): HTMLInputElement | null;
+    /**
+     *
+     * @param {number} _index
+     * @param {InputEvent & {target: HTMLInputElement}} _e
+     */
+    _handleInput(_index: number, _e: InputEvent & {
+        target: HTMLInputElement;
+    }): void;
+    /**
+     *
+     * @param {number} value
+     * @returns {number}
+     */
+    _getNormalizedValue(value: number): number;
+    _getNormalizedRange(): number[];
+    /**
+     * Determine if the "click" (pointer event) is closer the
+     * the value of the other input element. Swap the values if this is the case.
+     * @param {PointerEvent & {target: HTMLInputElement}} e
+     */
+    _handlePointerDown(e: PointerEvent & {
+        target: HTMLInputElement;
+    }): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { L as LeuElement } from './LeuElement-e092765a.js';
+//# sourceMappingURL=Range.d.ts.map

package/dist/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["Range.js"],"names":[],"mappings":"AA0MA;;GAEG;AACH;IAGI,uBAAwB;IACxB,YAAY;IACZ,YAAc;IACd,aAAa;IACb,aAAc;IACd,cAAe;IACf,kBAAqB;IACrB,kBAAqB;IAEvB,gBAEC;IACD,sBAYC;IAMD;;;;;OAKG;IACH,iCAWC;IAtBD,4BAGC;IAoBD,6BAEC;IACD,gCAMC;IACD,iCAMC;IAED;;OAEG;IACH,iBAFa,gBAAgB,GAAG,IAAI,CAInC;IAED;;OAEG;IACH,kBAFa,gBAAgB,GAAG,IAAI,CAInC;IAED;;;;OAIG;IACH,qBAHW,MAAM,MACN,UAAU,GAAG;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAC,QAIjD;IAED;;;;OAIG;IACH,2BAHW,MAAM,GACJ,MAAM,CAIlB;IACD,gCAKC;IAED;;;;OAIG;IACH,sBAFW,YAAY,GAAG;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAC,QAanD;IACD,+CAyCC;CACF;gCAnXqD,0BAA0B"}

package/dist/Range.js

@@ -0,0 +1,413 @@
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-e092765a.js';
+import { css, html } from 'lit';
+
+var css_248z = css`:host {
+  --range-color: var(--leu-color-black-40);
+  --range-color-disabled: var(--leu-color-black-20);
+  --range-color-focus: var(--leu-color-func-cyan);
+
+  --range-track-background-color: var(--leu-color-black-10);
+  --range-track-height: 4px;
+  --range-track-radius: var(--range-track-height);
+
+  --range-track-value-color: var(--leu-color-func-cyan);
+  --range-track-value-width: 0;
+  --range-track-value-min: 0;
+
+  --range-thumb-color: var(--leu-color-black-0);
+  --range-thumb-border-color: var(--range-color);
+  --range-thumb-hover-border-color: var(--leu-color-black-100);
+  --range-thumb-diameter: 32px;
+
+  --range-value-color: var(--leu-color-black-100);
+  --range-value-color-disabled: var(--range-color-disabled);
+
+  --range-font-regular: var(--leu-font-family-regular);
+  --range-font-black: var(--leu-font-family-black);
+
+  display: block;
+
+  font-family: var(--leu-font-family-regular);
+
+  font-family: var(--range-font-regular);
+}
+
+:host([disabled]) {
+  --range-track-background: var(--range-color-disabled);
+  --range-track-value-color: var(--range-color-disabled);
+  --range-thumb-border-color: var(--range-color-disabled);
+  --range-thumb-hover-border-color: var(--range-color-disabled);
+  --range-value-color: var(--range-value-color-disabled);
+}
+
+/***************************   */
+
+.label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-regular-regular-font);
+}
+
+.outputs {
+  position: relative;
+  height: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.output {
+  position: absolute;
+
+  text-align: center;
+  font: var(--leu-t-tiny-black-font);
+  color: var(--range-value-color);
+
+  min-width: var(--range-thumb-diameter);
+
+  --_stop: calc(100% - var(--range-thumb-diameter));
+  --_start: 0%;
+
+  left: calc(var(--value) * (calc(100% - var(--range-thumb-diameter)) - 0%) + 0%);
+
+  left: calc(var(--value) * (var(--_stop) - var(--_start)) + var(--_start));
+  transform: translateX(calc(-50% + var(--range-thumb-diameter) / 2));
+}
+
+.inputs {
+  position: relative;
+}
+
+.range {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 100%;
+  height: var(--range-thumb-diameter);
+  padding: 0;
+  margin: 0;
+  background: transparent;
+
+  --_track-background: linear-gradient(
+    to right,
+    var(--range-track-background-color) calc(var(--low) * 100%),
+    var(--range-track-value-color) 0,
+    var(--range-track-value-color) calc(var(--high) * 100%),
+    var(--range-track-background-color) 0
+  );
+}
+
+.range--ghost {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.range:focus {
+  outline: none;
+}
+
+/* Thumb */
+
+.range::-moz-range-thumb {
+  cursor: pointer;
+  background: var(--range-thumb-color);
+
+  border: 2px var(--range-thumb-border-color) solid;
+  border-radius: 50%;
+
+  height: var(--range-thumb-diameter);
+  width: var(--range-thumb-diameter);
+
+  pointer-events: all;
+}
+
+.range:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+
+.range:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--range-color-focus);
+  outline-offset: 2px;
+}
+
+.range::-moz-range-thumb:hover,
+.range:focus-visible::-moz-range-thumb {
+  border-color: var(--range-thumb-hover-border-color);
+}
+
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: var(--range-thumb-color);
+
+  border: 2px var(--range-thumb-border-color) solid;
+  border-radius: 50%;
+
+  height: var(--range-thumb-diameter);
+  width: var(--range-thumb-diameter);
+  margin-top: calc(var(--range-thumb-diameter) / -2 + 2px);
+
+  pointer-events: all;
+}
+
+.range:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+.range:focus::-webkit-slider-thumb {
+  outline: 2px solid var(--range-color-focus);
+  outline-offset: 2px;
+}
+
+.range:focus::-webkit-slider-thumb,
+.range::-webkit-slider-thumb:hover {
+  border-color: var(--range-thumb-hover-border-color);
+}
+
+/* Track */
+
+.range::-moz-range-track {
+  background: var(--_track-background);
+  border-radius: var(--range-track-radius);
+  height: var(--range-track-height);
+}
+
+.range--ghost::-moz-range-track {
+  background: transparent;
+}
+
+.range::-webkit-slider-runnable-track {
+  background: var(--_track-background);
+  border-radius: var(--range-track-radius);
+  height: var(--range-track-height);
+}
+
+.range--ghost::-webkit-slider-runnable-track {
+  background: transparent;
+}
+`;
+
+const defaultValueConverter = {
+  fromAttribute(value) {
+    return value.split(",").map(v => Number(v.trim()));
+  },
+  toAttribute(value) {
+    return value.join(",");
+  }
+};
+const RANGE_LABELS = ["Von", "Bis"];
+
+/**
+ * @tagname leu-range
+ */
+class LeuRange extends LeuElement {
+  constructor() {
+    super();
+    this.defaultValue = [50];
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.name = "";
+    this.label = "";
+    this.disabled = false;
+    this.multiple = false;
+  }
+  updated() {
+    this._updateStyles();
+  }
+  _updateStyles() {
+    const normalizedRange = this._getNormalizedRange();
+    this.style.setProperty("--low", normalizedRange[0].toString());
+    this.style.setProperty("--high", normalizedRange[1].toString());
+    const inputs = this.multiple ? [this._getBaseInput(), this._getGhostInput()] : [this._getBaseInput()];
+    inputs.forEach(input => {
+      /** @type {HTMLOutputElement} */
+      const output = this.shadowRoot.querySelector(`.output[for=${input.id}]`);
+      const normalizedValue = this._getNormalizedValue(input.valueAsNumber);
+      output.style.setProperty("--value", normalizedValue.toString());
+      output.value = input.value;
+    });
+  }
+  get value() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"));
+    return inputs.map(input => input.value).join(",");
+  }
+
+  /**
+   * Sets the value of the underlying input element(s).
+   * The value has to be an array if "multiple" range is used.
+   * Otherwise it has to be a string.
+   * @param {string | Array} value
+   */
+  set value(value) {
+    if (this.multiple && Array.isArray(value)) {
+      const inputs = Array.from(this.shadowRoot.querySelectorAll("input"));
+      value.forEach((v, i) => {
+        inputs[i].value = v;
+      });
+      this._updateStyles();
+    } else if (!this.multiple) {
+      this._getBaseInput().value = value;
+      this._updateStyles();
+    }
+  }
+  get valueAsArray() {
+    return Array.from(this.shadowRoot.querySelectorAll("input")).map(input => input.valueAsNumber);
+  }
+  get valueLow() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"));
+    if (this.multiple) {
+      return inputs.map(input => input.valueAsNumber).sort((a, b) => a - b)[0];
+    }
+    return inputs[0].value;
+  }
+  get valueHigh() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"));
+    if (this.multiple) {
+      return inputs.map(input => input.valueAsNumber).sort((a, b) => a - b)[1];
+    }
+    return inputs[0].value;
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getBaseInput() {
+    return this.shadowRoot.querySelector(".range--base");
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getGhostInput() {
+    return this.shadowRoot.querySelector(".range--ghost");
+  }
+
+  /**
+   *
+   * @param {number} _index
+   * @param {InputEvent & {target: HTMLInputElement}} _e
+   */
+  _handleInput(_index, _e) {
+    this._updateStyles();
+  }
+
+  /**
+   *
+   * @param {number} value
+   * @returns {number}
+   */
+  _getNormalizedValue(value) {
+    return (value - this.min) / (this.max - this.min);
+  }
+  _getNormalizedRange() {
+    if (this.multiple) {
+      return this.valueAsArray.map(value => this._getNormalizedValue(value)).sort((a, b) => a - b);
+    }
+    return [0, this._getNormalizedValue(this.valueAsArray[0])];
+  }
+
+  /**
+   * Determine if the "click" (pointer event) is closer the
+   * the value of the other input element. Swap the values if this is the case.
+   * @param {PointerEvent & {target: HTMLInputElement}} e
+   */
+  _handlePointerDown(e) {
+    const clickValue = this.min + (this.max - this.min) * e.offsetX / this.offsetWidth;
+    const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2;
+    if (e.target.valueAsNumber === this.valueLow === clickValue > middleValue) {
+      /**
+       * As the pointerdown event is fired before the input event, we first overwrite the value
+       * of the input element that was not clicked on. The active input element will update itself.
+       */
+      // this._value = [e.target.valueAsNumber, e.target.valueAsNumber]
+      this._getGhostInput().value = e.target.value;
+    }
+  }
+  render() {
+    const inputs = this.multiple ? ["base", "ghost"] : ["base"];
+    const {
+      multiple,
+      disabled,
+      label,
+      defaultValue
+    } = this;
+    return html`
+      <div
+        role=${multiple ? "group" : undefined}
+        aria-labelledby=${multiple ? "group-label" : undefined}
+      >
+        ${multiple ? html`<span id="group-label" class="label">${label}</span>` : html`<label for="input-base" class="label">${label}</label>`}
+        <div class="outputs">
+          ${inputs.map((type, index) => html`<output
+                class="output"
+                for="input-${type}"
+                value=${defaultValue[index]}
+              ></output>`)}
+        </div>
+        <div class="inputs">
+          ${inputs.map((type, index) => html`
+                <input
+                  @input=${e => this._handleInput(index, e)}
+                  @pointerdown=${multiple && !disabled && index === 0 ? this._handlePointerDown : undefined}
+                  type="range"
+                  class="range range--${type}"
+                  id="input-${type}"
+                  name=${this.name}
+                  min=${this.min}
+                  max=${this.max}
+                  step=${this.step}
+                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                  ?disabled=${disabled}
+                  .value=${defaultValue[index].toString()}
+                />
+              `)}
+        </div>
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuRange, "styles", [LeuElement.styles, css_248z]);
+_defineProperty(LeuRange, "shadowRootOptions", {
+  ...LeuElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuRange, "properties", {
+  defaultValue: {
+    converter: defaultValueConverter,
+    attribute: "value"
+  },
+  min: {
+    type: Number,
+    reflect: true
+  },
+  max: {
+    type: Number,
+    reflect: true
+  },
+  step: {
+    type: Number,
+    reflect: true
+  },
+  name: {
+    type: String,
+    reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  multiple: {
+    type: Boolean,
+    reflect: true
+  }
+});
+
+export { LeuRange };

package/dist/ScrollTop.d.ts

@@ -15,5 +15,5 @@ export class LeuScrollTop extends LeuElement {
     _scrollListener: Function;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-6fbc0dee.js';
+import { L as LeuElement } from './LeuElement-e092765a.js';
 //# sourceMappingURL=ScrollTop.d.ts.map