@statistikzh/leu 0.22.1 → 0.24.0

package/dist/Range.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 
 var css_248z = css`:host {
   --range-color: var(--leu-color-black-40);
@@ -40,7 +40,9 @@ var css_248z = css`:host {
   --range-value-color: var(--range-value-color-disabled);
 }
 
-/***************************   */
+.container {
+  position: relative;
+}
 
 .label {
   display: inline-block;
@@ -49,6 +51,17 @@ var css_248z = css`:host {
   font: var(--leu-t-regular-regular-font);
 }
 
+:host([hide-label]) .label {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}
+
 .outputs {
   position: relative;
   height: 1.5rem;
@@ -75,6 +88,8 @@ var css_248z = css`:host {
 
 .inputs {
   position: relative;
+  z-index: 1;
+  height: var(--range-thumb-diameter);
 }
 
 .range {
@@ -188,6 +203,39 @@ var css_248z = css`:host {
 .range--ghost::-webkit-slider-runnable-track {
   background: transparent;
 }
+
+/* Ticks */
+
+.ticks {
+  position: absolute;
+  top: calc(
+    var(--range-thumb-diameter) / 2 + var(--range-track-height)
+  );
+  left: calc(var(--range-thumb-diameter) / 2);
+  right: calc(var(--range-thumb-diameter) / 2);
+}
+
+.tick {
+  z-index: -1;
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 0.5rem;
+  background-color: var(--range-track-background-color);
+  transform: translateY(-50%);
+}
+
+.tick-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--leu-color-black-60);
+  font: var(--leu-t-tiny-regular-font);
+  margin-top: 0.25rem;
+}
+
+.tick-label--max {
+  text-align: right;
+}
 `;
 
 const defaultValueConverter = {
@@ -206,13 +254,56 @@ class LeuRange extends LeuElement {
     constructor() {
         super(...arguments);
         this.defaultValue = [50];
+        /**
+         * The minimum value of the range slider.
+         */
         this.min = 0;
+        /**
+         * The maximum value of the range slider.
+         */
         this.max = 100;
+        /**
+         * The step size of the range slider.
+         */
         this.step = 1;
         this.name = "";
+        /**
+         * The label of the range slider.
+         */
         this.label = "";
+        /**
+         * Whether to hide the label of the range slider.
+         * If true, the label will still be available for screen readers
+         * and is only visually hidden.
+         */
+        this.hideLabel = false;
+        /**
+         * Whether the range slider is disabled.
+         */
         this.disabled = false;
+        /**
+         * Whether to use a range with two handles.
+         */
         this.multiple = false;
+        /**
+         * Wheter to show tick marks below the range slider.
+         * One tick mark per step will be rendered.
+         */
+        this.showTicks = false;
+        /**
+         * Whether to show the min and max labels below the range slider.
+         */
+        this.showRangeLabels = false;
+        /**
+         * A prefix to display before the value in the output element(s).
+         * Is ignored if a custom valueFormatter is provided.
+         */
+        this.prefix = "";
+        /**
+         * A suffix to display after the value in the output element(s).
+         * Is ignored if a custom valueFormatter is provided.
+         */
+        this.suffix = "";
     }
     updated() {
         this._updateStyles();
@@ -231,7 +322,7 @@ class LeuRange extends LeuElement {
             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;
+            output.value = this.formatValue(input.valueAsNumber);
         });
     }
     get value() {
@@ -309,11 +400,29 @@ class LeuRange extends LeuElement {
             this._getGhostInput().value = e.target.value;
         }
     }
+    formatValue(value) {
+        if (this.valueFormatter) {
+            return this.valueFormatter(value);
+        }
+        return `${this.prefix}${value}${this.suffix}`;
+    }
+    renderTicks() {
+        if (!this.showTicks) {
+            return nothing;
+        }
+        return html `<div class="ticks">
+      ${Array.from({ length: (this.max - this.min) / this.step + 1 }, (_, i) => this.min + i * this.step).map((tick) => html `<span
+            class="tick"
+            style="left: ${this._getNormalizedValue(tick) * 100}%"
+          ></span>`)}
+    </div>`;
+    }
     render() {
         const inputs = this.multiple ? ["base", "ghost"] : ["base"];
         const { multiple, disabled, label, defaultValue } = this;
         return html `
       <div
+        class="container"
         role=${multiple ? "group" : undefined}
         aria-labelledby=${multiple ? "group-label" : undefined}
       >
@@ -324,7 +433,7 @@ class LeuRange extends LeuElement {
           ${inputs.map((type, index) => html `<output
                 class="output"
                 for="input-${type}"
-                value=${defaultValue[index]}
+                value=${this.formatValue(defaultValue[index])}
               ></output>`)}
         </div>
         <div class="inputs">
@@ -346,8 +455,19 @@ class LeuRange extends LeuElement {
                 .value=${defaultValue[index].toString()}
               />
             `)}
+          ${this.renderTicks()}
         </div>
       </div>
+      ${this.showRangeLabels
+            ? html `<div class="tick-labels">
+            <span class="tick-label tick-label--min"
+              >${this.formatValue(this.min)}</span
+            >
+            <span class="tick-label tick-label--max"
+              >${this.formatValue(this.max)}</span
+            >
+          </div>`
+            : nothing}
     `;
     }
 }
@@ -374,11 +494,29 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], LeuRange.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "hide-label" })
+], LeuRange.prototype, "hideLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LeuRange.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LeuRange.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "show-ticks" })
+], LeuRange.prototype, "showTicks", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "show-range-labels" })
+], LeuRange.prototype, "showRangeLabels", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuRange.prototype, "prefix", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuRange.prototype, "suffix", void 0);
+__decorate([
+    property({ attribute: false })
+], LeuRange.prototype, "valueFormatter", void 0);
 
 export { LeuRange };

package/dist/ScrollTop.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
 import 'lit/directives/if-defined.js';

package/dist/Select.js

@@ -2,7 +2,7 @@ import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/Spinner.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 
 var css_248z = css`@keyframes leu-spinner-rotate {
   from {

package/dist/Table.js

@@ -1,7 +1,7 @@
 import { nothing, noChange, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { directive, Directive, PartType } from 'lit/directive.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';

package/dist/Tag.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 
 var css_248z = css`:host {
   /* --tag-font-regular: var(--leu-font-family-regular);

package/dist/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 
 var css_248z = css`:host {
   clip: rect(0 0 0 0);

package/dist/components/file-input/FileInput.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues } from "lit";
 import { LeuElement } from "../../lib/LeuElement.js";
-import { LeuButton } from "../../index.js";
-import { LeuIcon } from "../icon/leu-icon.js";
+import { LeuButton } from "../button/Button.js";
+import { LeuIcon } from "../icon/Icon.js";
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
 /**
  * @todo Pluralize text when multiple files are allowed

package/dist/components/file-input/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/FileInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAA;AAKnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;GAGG;AAEH;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,YAAY;;;;MAIlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAED,MAAM,CAAC,cAAc,UAAO;IAE5B,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAA;IAGrC,KAAK,EAAE,MAAM,CAAK;IAElB,0MAA0M;IAE1M,MAAM,EAAE,MAAM,CAAK;IAEnB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,oDAAoD;IAEpD,QAAQ,EAAE,OAAO,CAAQ;IAEzB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,6EAA6E;IAE7E,OAAO,EAAE,QAAQ,GAAG,aAAa,CAAW;IAGrC,KAAK,EAAE,IAAI,EAAE,CAAK;IAGzB,OAAO,CAAC,UAAU,CAAiB;IAGnC,KAAK,EAAE,gBAAgB,CAAA;;IAQvB,IAAI,IAAI,oBAEP;IAED,IAAI,IAAI,WAEP;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAU/C,SAAS,CAAC,WAAW;IAarB,OAAO,CAAC,YAAY;IAKb,iBAAiB;IAKxB,SAAS,CAAC,eAAe;IAYzB,SAAS,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI;IAKvC,SAAS,CAAC,4BAA4B;IAetC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM;IAY5C,SAAS,CAAC,eAAe,UAAW,SAAS,UAQ5C;IAGD,SAAS,CAAC,cAAc,UAAW,SAAS,UAK3C;IAED,SAAS,CAAC,eAAe,UAAW,SAAS,UAM5C;IAED,SAAS,CAAC,UAAU,UAAW,SAAS,UAqBvC;IAED,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IA4BnC,MAAM;CAkEP"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/FileInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAA;AAKnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;GAGG;AAEH;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,YAAY;;;;MAIlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAED,MAAM,CAAC,cAAc,UAAO;IAE5B,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAA;IAGrC,KAAK,EAAE,MAAM,CAAK;IAElB,0MAA0M;IAE1M,MAAM,EAAE,MAAM,CAAK;IAEnB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,oDAAoD;IAEpD,QAAQ,EAAE,OAAO,CAAQ;IAEzB,0CAA0C;IAE1C,QAAQ,EAAE,OAAO,CAAQ;IAEzB,6EAA6E;IAE7E,OAAO,EAAE,QAAQ,GAAG,aAAa,CAAW;IAGrC,KAAK,EAAE,IAAI,EAAE,CAAK;IAGzB,OAAO,CAAC,UAAU,CAAiB;IAGnC,KAAK,EAAE,gBAAgB,CAAA;;IAQvB,IAAI,IAAI,oBAEP;IAED,IAAI,IAAI,WAEP;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAU/C,SAAS,CAAC,WAAW;IAarB,OAAO,CAAC,YAAY;IAKb,iBAAiB;IAKxB,SAAS,CAAC,eAAe;IAYzB,SAAS,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI;IAKvC,SAAS,CAAC,4BAA4B;IAetC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM;IAY5C,SAAS,CAAC,eAAe,UAAW,SAAS,UAQ5C;IAGD,SAAS,CAAC,cAAc,UAAW,SAAS,UAK3C;IAED,SAAS,CAAC,eAAe,UAAW,SAAS,UAM5C;IAED,SAAS,CAAC,UAAU,UAAW,SAAS,UAqBvC;IAED,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IA4BnC,MAAM;CAkEP"}

package/dist/components/popup/Popup.d.ts

@@ -25,6 +25,22 @@ export declare class LeuPopup extends LeuElement {
     shift: boolean;
     shiftPadding: number;
     matchSize?: "width" | "height" | "both";
+    /**
+     * Offsets the popup along the main axis.
+     * @link https://floating-ui.com/docs/offset#mainaxis
+     */
+    offsetMainAxis?: number;
+    /**
+     * Offsets the popup along the cross axis.
+     * @link https://floating-ui.com/docs/offset#crossaxis
+     */
+    offsetCrossAxis?: number;
+    /**
+     * Offsets the popup along the alignment axis.
+     * Overrides the `offsetCrossAxis` value.
+     * @link https://floating-ui.com/docs/offset#alignmentaxis
+     */
+    offsetAlignmentAxis?: number;
     autoSize?: "width" | "height" | "both";
     autoSizePadding: number;
     private anchorEl;

package/dist/components/popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EAIL,SAAS,EAGV,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAIpD,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAA;IACpC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAWD;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAEW,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAA;IAGrD,MAAM,EAAE,OAAO,CAAQ;IAGvB,SAAS,CAAC,EAAE,SAAS,CAAA;IAGrB,IAAI,EAAE,OAAO,CAAQ;IAGrB,KAAK,EAAE,OAAO,CAAQ;IAGtB,YAAY,EAAE,MAAM,CAAI;IAGxB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAEI,QAAQ,CAAC,EAChD,OAAO,GACP,QAAQ,GACR,MAAM,CAAA;IAEiC,eAAe,EAAE,MAAM,CAAI;IAEtE,OAAO,CAAC,QAAQ,CAAgB;IAEhC,OAAO,CAAC,OAAO,CAA2C;IAE1D,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAkB/C,SAAS,KAAK,OAAO,mBAEpB;IAED,SAAS,CAAC,KAAK;IAQf,SAAS,CAAC,IAAI;IAOP,UAAU;IAmFjB,kBAAkB;IAsBlB,MAAM;CAQP"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,EAIL,SAAS,EAIV,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAIpD,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAA;IACpC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAWD;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAEW,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAA;IAGrD,MAAM,EAAE,OAAO,CAAQ;IAGvB,SAAS,CAAC,EAAE,SAAS,CAAA;IAGrB,IAAI,EAAE,OAAO,CAAQ;IAGrB,KAAK,EAAE,OAAO,CAAQ;IAGtB,YAAY,EAAE,MAAM,CAAI;IAGxB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAEvC;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IAEH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAEe,QAAQ,CAAC,EAChD,OAAO,GACP,QAAQ,GACR,MAAM,CAAA;IAEiC,eAAe,EAAE,MAAM,CAAI;IAEtE,OAAO,CAAC,QAAQ,CAAgB;IAEhC,OAAO,CAAC,OAAO,CAA2C;IAE1D,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAkB/C,SAAS,KAAK,OAAO,mBAEpB;IAED,SAAS,CAAC,KAAK;IAQf,SAAS,CAAC,IAAI;IAOP,UAAU;IAiGjB,kBAAkB;IAsBlB,MAAM;CAQP"}

package/dist/components/popup/stories/popup.stories.d.ts

@@ -21,6 +21,8 @@ export declare const VirtualElement: {
         placement: string;
         flip: boolean;
         shift: boolean;
+        offsetMainAxis: number;
+        offsetAlignmentAxis: number;
     };
 };
 //# sourceMappingURL=popup.stories.d.ts.map

package/dist/components/popup/stories/popup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popup.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/stories/popup.stories.ts"],"names":[],"mappings":"AAGA,OAAO,iBAAiB,CAAA;AACxB,OAAO,4BAA4B,CAAA;;;;;;;;;;;;;AAEnC,wBAwBC;AAqBD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAQxC,eAAO,MAAM,cAAc;;;;;;;;CA+C1B,CAAA"}
+{"version":3,"file":"popup.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/stories/popup.stories.ts"],"names":[],"mappings":"AAGA,OAAO,iBAAiB,CAAA;AACxB,OAAO,4BAA4B,CAAA;;;;;;;;;;;;;AAEnC,wBAwBC;AAwBD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAUxC,eAAO,MAAM,cAAc;;;;;;;;;;CAoD1B,CAAA"}

package/dist/components/range/Range.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from "lit";
 import { LeuElement } from "../../lib/LeuElement.js";
 /**
  * @tagname leu-range
@@ -13,13 +14,61 @@ export declare class LeuRange extends LeuElement {
         registry?: CustomElementRegistry;
     };
     defaultValue: number[];
+    /**
+     * The minimum value of the range slider.
+     */
     min: number;
+    /**
+     * The maximum value of the range slider.
+     */
     max: number;
+    /**
+     * The step size of the range slider.
+     */
     step: number;
     name: string;
+    /**
+     * The label of the range slider.
+     */
     label: string;
+    /**
+     * Whether to hide the label of the range slider.
+     * If true, the label will still be available for screen readers
+     * and is only visually hidden.
+     */
+    hideLabel: boolean;
+    /**
+     * Whether the range slider is disabled.
+     */
     disabled: boolean;
+    /**
+     * Whether to use a range with two handles.
+     */
     multiple: boolean;
+    /**
+     * Wheter to show tick marks below the range slider.
+     * One tick mark per step will be rendered.
+     */
+    showTicks: boolean;
+    /**
+     * Whether to show the min and max labels below the range slider.
+     */
+    showRangeLabels: boolean;
+    /**
+     * A prefix to display before the value in the output element(s).
+     * Is ignored if a custom valueFormatter is provided.
+     */
+    prefix: string;
+    /**
+     * A suffix to display after the value in the output element(s).
+     * Is ignored if a custom valueFormatter is provided.
+     */
+    suffix: string;
+    /**
+     * A custom function to format the value displayed in the output element(s).
+     * If provided, the prefix and suffix properties will be ignored.
+     */
+    valueFormatter?: (value: number) => string;
     updated(): void;
     protected get _inputs(): HTMLInputElement[];
     protected _updateStyles(): void;
@@ -47,6 +96,8 @@ export declare class LeuRange extends LeuElement {
     protected _handlePointerDown(e: PointerEvent & {
         target: HTMLInputElement;
     }): void;
+    protected formatValue(value: number): string;
+    protected renderTicks(): typeof nothing | import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=Range.d.ts.map

package/dist/components/range/Range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/range/Range.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAapD;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAGD,YAAY,WAAO;IAGnB,GAAG,EAAE,MAAM,CAAI;IAGf,GAAG,EAAE,MAAM,CAAM;IAGjB,IAAI,EAAE,MAAM,CAAI;IAGhB,IAAI,EAAE,MAAM,CAAK;IAGjB,KAAK,EAAE,MAAM,CAAK;IAGlB,QAAQ,EAAE,OAAO,CAAQ;IAGzB,QAAQ,EAAE,OAAO,CAAQ;IAEzB,OAAO;IAIP,SAAS,KAAK,OAAO,uBAIpB;IAED,SAAS,CAAC,aAAa;IAmBvB,IAAI,KAAK,IASQ,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAPtC;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,EAYtC;IAED,IAAI,YAAY,aAEf;IAED,IAAI,QAAQ,oBAQX;IAED,IAAI,SAAS,oBAQZ;IAED,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc;IAIxB,SAAS,CAAC,YAAY,CACpB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,UAAU,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAK/C,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAI3C,SAAS,CAAC,mBAAmB;IAU7B;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAkB3E,MAAM;CAgDP"}
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/range/Range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAapD;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAGD,YAAY,WAAO;IAEnB;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAI;IAEf;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAM;IAEjB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAI;IAGhB,IAAI,EAAE,MAAM,CAAK;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAK;IAElB;;;;OAIG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAQ;IAEzB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAQ;IAEzB;;;OAGG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAQ;IAEhC;;;OAGG;IAEH,MAAM,EAAE,MAAM,CAAK;IAEnB;;;OAGG;IAEH,MAAM,EAAE,MAAM,CAAK;IAEnB;;;OAGG;IAEH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAE1C,OAAO;IAIP,SAAS,KAAK,OAAO,uBAIpB;IAED,SAAS,CAAC,aAAa;IAmBvB,IAAI,KAAK,IASQ,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAPtC;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,EAYtC;IAED,IAAI,YAAY,aAEf;IAED,IAAI,QAAQ,oBAQX;IAED,IAAI,SAAS,oBAQZ;IAED,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc;IAIxB,SAAS,CAAC,YAAY,CACpB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,UAAU,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAK/C,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAI3C,SAAS,CAAC,mBAAmB;IAU7B;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAkB3E,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM;IAQnC,SAAS,CAAC,WAAW;IAmBrB,MAAM;CA4DP"}