@statistikzh/leu 0.22.1 → 0.24.0

package/.github/workflows/ci.yml

@@ -7,10 +7,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
@@ -25,10 +25,10 @@ jobs:
     needs: lint
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
@@ -47,10 +47,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
@@ -62,7 +62,7 @@ jobs:
         run: npx playwright install
 
       - name: Cache Playwright binaries
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
@@ -75,7 +75,7 @@ jobs:
       - name: Run tests
         run: npm test
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v6
         with:
           name: coverage
           path: coverage/

package/.github/workflows/deploy-github-pages.yaml

@@ -18,10 +18,10 @@ jobs:
     # Job steps
     steps:
       # Manual Checkout
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       # Set up Node
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
           cache: "npm"

package/.github/workflows/publish.yml

@@ -0,0 +1,30 @@
+name: Publish Package to npm
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "leu-v*"
+
+permissions:
+  id-token: write # Required for OIDC
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+          registry-url: "https://registry.npmjs.org"
+      - run: npm --version
+      - run: npm ci
+      - run: npm run build
+      - name: Publish to npm
+        env:
+          NPM_CONFIG_PROVENANCE: true
+        run: npm publish

package/.github/workflows/release-please.yml

@@ -4,11 +4,10 @@ on:
       - main
 
 permissions:
-  id-token: write
   contents: write
   pull-requests: write
 
-name: Create release and publish to npm
+name: Create release
 
 jobs:
   release-please:
@@ -18,20 +17,3 @@ jobs:
         id: release
         with:
           token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
-      # The logic below handles the npm publication:
-      - uses: actions/checkout@v4
-        # these if statements ensure that a publication only occurs when
-        # a new release is created:
-        if: ${{ steps.release.outputs.release_created }}
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: ".nvmrc"
-          cache: "npm"
-          registry-url: "https://registry.npmjs.org"
-        if: ${{ steps.release.outputs.release_created }}
-      - run: npm ci
-        if: ${{ steps.release.outputs.release_created }}
-      - run: npm run build
-        if: ${{ steps.release.outputs.release_created }}
-      - run: npm publish --access public
-        if: ${{ steps.release.outputs.release_created }}

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.22.1"
+  ".": "0.24.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [0.24.0](https://github.com/statistikZH/leu/compare/leu-v0.23.0...leu-v0.24.0) (2026-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* **range:** The height of the element changed. When the label was empty it still rendered an empty element. This is now removed. Also the height of the range element was reduced by 4px to match the design specification.
+
+### Features
+
+* **range:** add `hide-label` option to visually hide the label ([b344fa8](https://github.com/statistikZH/leu/commit/b344fa8f47b6b8c221211c5a7f84089762e29092))
+* **range:** add `prefix`, `suffix` and `valueFormatter` properties to customize the value formatting ([b344fa8](https://github.com/statistikZH/leu/commit/b344fa8f47b6b8c221211c5a7f84089762e29092))
+* **range:** add `show-ticks` and `show-range-labels` options to display ticks and the range value labels ([b344fa8](https://github.com/statistikZH/leu/commit/b344fa8f47b6b8c221211c5a7f84089762e29092))
+
+
+### Documentation
+
+* **range:** rename story file to match convention ([b344fa8](https://github.com/statistikZH/leu/commit/b344fa8f47b6b8c221211c5a7f84089762e29092))
+
+## [0.23.0](https://github.com/statistikZH/leu/compare/leu-v0.22.1...leu-v0.23.0) (2026-01-20)
+
+
+### Features
+
+* **popup:** add offset properties to translate the popup content ([#324](https://github.com/statistikZH/leu/issues/324)) ([1e71bf0](https://github.com/statistikZH/leu/commit/1e71bf061bb940156dd0a24a71243db093d7bd49))
+
 ## [0.22.1](https://github.com/statistikZH/leu/compare/leu-v0.22.0...leu-v0.22.1) (2025-12-17)
 
 

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing } from 'lit';
 import { unsafeStatic, html } from 'lit/static-html.js';
 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 {
   --accordion-font-regular: var(--leu-font-family-regular);

package/dist/Button.js

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { LeuIcon } from './Icon.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';
 
 /**

package/dist/ButtonGroup.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';
 import { LeuButton } from './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/ChartWrapper.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 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';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 

package/dist/Checkbox.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';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/CheckboxGroup.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 { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,6 +1,6 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { unsafeStatic, html } from 'lit/static-html.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { css } from 'lit';
 import { LeuChipSelectable } from './ChipSelectable.js';
 import './Chip.js';

package/dist/ChipLink.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-DfsEye-A.js';
+import './LeuElement-BfbOWTGZ.js';
 
 /**
  * @tagname leu-chip-link

package/dist/ChipRemovable.js

@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-DfsEye-A.js';
+import './LeuElement-BfbOWTGZ.js';
 
 /**
  * @slot - The content of the chip

package/dist/ChipSelectable.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-DfsEye-A.js';
+import './LeuElement-BfbOWTGZ.js';
 
 /**
  * A chip component that can be selected.

package/dist/Dialog.js

@@ -3,7 +3,7 @@ import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.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 { LeuIcon } from './Icon.js';
 

package/dist/Dropdown.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { property } from 'lit/decorators.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/FileInput.d.ts

@@ -5,7 +5,6 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 import { LeuButton } from './Button.js';
 import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './leu-icon.js';
 
 /**
  * @todo Pluralize text when multiple files are allowed

package/dist/FileInput.js

@@ -3,45 +3,11 @@ import { css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
-import './Accordion.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuButton } from './Button.js';
-import './ButtonGroup.js';
-import './ChartWrapper.js';
-import './Checkbox.js';
-import './CheckboxGroup.js';
-import './ChipGroup.js';
-import './ChipLink.js';
-import './ChipRemovable.js';
-import './ChipSelectable.js';
-import './Dialog.js';
-import './Dropdown.js';
 import { LeuIcon } from './Icon.js';
-import './Input.js';
-import './Menu.js';
-import './MenuItem.js';
-import './Message.js';
-import './Pagination.js';
-import './Placeholder.js';
-import './Popup.js';
-import './ProgressBar.js';
-import './Radio.js';
-import './RadioGroup.js';
-import './Range.js';
-import './ScrollTop.js';
-import './Select.js';
-import './Spinner.js';
-import './Table.js';
-import './Tag.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './leu-icon.js';
-import 'lit/static-html.js';
 import './hasSlotController-Bm2tipvG.js';
-import './Chip.js';
-import 'lit/directives/ref.js';
-import '@floating-ui/dom';
-import 'lit/directives/live.js';
-import 'lit/directive.js';
 
 var css_248z = css`:host {
   --file-input-font-regular: var(--leu-font-family-regular);

package/dist/Icon.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, svg } 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 {
   display: contents;

package/dist/Input.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { property, state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/{LeuElement-DfsEye-A.js → LeuElement-BfbOWTGZ.js}

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.22.1";
+LeuElement.version = "0.24.0";
 LeuElement.dependencies = {};
 LeuElement.styles = css_248z;
 

package/dist/Menu.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';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/MenuItem.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/Message.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuIcon } from './Icon.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 

package/dist/Pagination.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
 import { property, 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 { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';

package/dist/Placeholder.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 {
   --placeholder-font-regular: var(--leu-font-family-regular);

package/dist/Popup.d.ts

@@ -28,6 +28,22 @@ 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/Popup.js

@@ -1,8 +1,8 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { autoUpdate, offset, size, flip, shift, computePosition } from '@floating-ui/dom';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 
 var css_248z = css`:host {
   --popup-font-regular: var(--leu-font-family-regular);
@@ -91,6 +91,15 @@ class LeuPopup extends LeuElement {
         if (!this.anchorEl || !this.popupEl || !this.active)
             return;
         const middleware = [];
+        if (this.offsetAlignmentAxis ||
+            this.offsetMainAxis ||
+            this.offsetCrossAxis) {
+            middleware.push(offset({
+                mainAxis: this.offsetMainAxis,
+                crossAxis: this.offsetCrossAxis,
+                alignmentAxis: this.offsetAlignmentAxis,
+            }));
+        }
         if (this.matchSize) {
             middleware.push(size({
                 apply: ({ rects }) => {
@@ -206,6 +215,15 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], LeuPopup.prototype, "matchSize", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "offset-main-axis" })
+], LeuPopup.prototype, "offsetMainAxis", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "offset-cross-axis" })
+], LeuPopup.prototype, "offsetCrossAxis", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "offset-alignment-axis" })
+], LeuPopup.prototype, "offsetAlignmentAxis", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], LeuPopup.prototype, "autoSize", void 0);

package/dist/ProgressBar.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 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 {
   --progress-bar-font-regular: var(--leu-font-family-regular);

package/dist/Radio.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 {
   --radio-color: var(--leu-color-black-40);

package/dist/RadioGroup.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 { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DfsEye-A.js';
+import { L as LeuElement } from './LeuElement-BfbOWTGZ.js';
 import { LeuRadio } from './Radio.js';
 
 var css_248z = css`:host {

package/dist/Range.d.ts

@@ -1,5 +1,6 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
+import { nothing } from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 
 /**
@@ -16,13 +17,61 @@ 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;
@@ -50,6 +99,8 @@ declare class LeuRange extends LeuElement {
     protected _handlePointerDown(e: PointerEvent & {
         target: HTMLInputElement;
     }): void;
+    protected formatValue(value: number): string;
+    protected renderTicks(): typeof nothing | lit_html.TemplateResult<1>;
     render(): lit_html.TemplateResult<1>;
 }