@statistikzh/leu 0.14.2 → 0.14.4

package/.eslintrc.json

@@ -1,8 +1,15 @@
 {
   "ignorePatterns": ["scripts/generate-component/templates/**/*"],
-  "extends": ["@open-wc", "prettier", "plugin:storybook/recommended"],
+  "extends": [
+    "@open-wc",
+    "prettier",
+    "plugin:storybook/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "rules": {
-    "no-unused-vars": [
+    "@typescript-eslint/no-unused-vars": [
       "error",
       {
         "varsIgnorePattern": "^_",
@@ -16,11 +23,15 @@
           "array": false
         }
       }
-    ]
+    ],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "error",
+    // TODO: Fix this with the upgrade to ESLint 9
+    "import/no-unresolved": "off"
   },
   "overrides": [
     {
-      "files": ["**/scripts/**/*.js"],
+      "files": ["**/scripts/**/*.js", "**/scripts/**/*.ts"],
       "rules": {
         "import/no-extraneous-dependencies": [
           "error",
@@ -30,6 +41,14 @@
         ],
         "no-console": "off"
       }
+    },
+    {
+      "files": ["*.test.ts"],
+      // Chai assertions are possible without a function call
+      // e.g. expect(someTrueValue).to.be.true;
+      "rules": {
+        "@typescript-eslint/no-unused-expressions": "off"
+      }
     }
   ],
   "globals": {

package/.github/workflows/ci.yml

@@ -69,6 +69,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-playwright-
 
+      - name: Build theme
+        run: npm run build:css
+
       - name: Run tests
         run: npm test
 

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

@@ -16,7 +16,6 @@ jobs:
       - uses: googleapis/release-please-action@v4
         id: release
         with:
-          release-type: node
           token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
       # The logic below handles the npm publication:
       - uses: actions/checkout@v4

package/.prettierignore

@@ -1,2 +1,2 @@
-scripts/generate-component/templates/**/*.js
+scripts/generate-component/templates/**/*.ts
 CHANGELOG.md

package/.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  ".": "0.14.4"
+}

package/.storybook/{main.js → main.ts}

@@ -1,10 +1,13 @@
 import rollupJson from "@rollup/plugin-json"
 import rollupCommonjs from "@rollup/plugin-commonjs"
+import rollupTypescript from "rollup-plugin-typescript2"
+import { StorybookConfig } from "@web/storybook-framework-web-components"
+
+import { fileURLToPath } from "url"
 
 import { plugins as rollupPlugins } from "../rollup.config.js"
 
-/** @type { import('@web/storybook-framework-web-components').StorybookConfig } */
-const config = {
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-essentials",
@@ -41,6 +44,19 @@ const config = {
   },
   async rollupFinal(config) {
     config.plugins = [
+      rollupTypescript({
+        tsconfig: fileURLToPath(
+          new URL("../tsconfig.build.json", import.meta.url),
+        ),
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationMap: false,
+            emitDeclarationOnly: false,
+            declaration: false,
+            noEmit: false,
+          },
+        },
+      }),
       ...config.plugins,
       ...rollupPlugins.map((p) => p.plugin(...p.args)),
       rollupCommonjs(),

package/.storybook/{theme.js → theme.ts}

@@ -1,6 +1,7 @@
 import { create } from "@storybook/theming/create"
 
 export const theme = create({
+  base: "dark",
   brandTitle: "leu – Component Library",
   brandUrl: "https://www.zh.ch/de/webangebote-entwickeln-und-gestalten.html",
   brandImage: "logo.svg",

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.14.4](https://github.com/statistikZH/leu/compare/leu-v0.14.3...leu-v0.14.4) (2025-06-18)
+
+
+### Bug Fixes
+
+* disable bundling when using esm.sh ([570a0ff](https://github.com/statistikZH/leu/commit/570a0ff633f784fb42ec09fffbc33bbb90ccea12))
+
+## [0.14.3](https://github.com/statistikZH/leu/compare/v0.14.2...v0.14.3) (2025-04-17)
+
+
+### Bug Fixes
+
+* **menu:** only call focus when an item exists ([60d71e8](https://github.com/statistikZH/leu/commit/60d71e8847a4dd6cd152a4cfc4770af98e029f8b))
+* **select:** avoid clearing selection when clearable is not set ([3a21cf1](https://github.com/statistikZH/leu/commit/3a21cf1363826064d73a4da7eeaf078a3b0a6455))
+* **select:** only render 'no results' message when a filter is set ([60d71e8](https://github.com/statistikZH/leu/commit/60d71e8847a4dd6cd152a4cfc4770af98e029f8b))
+
 ## [0.14.2](https://github.com/statistikZH/leu/compare/v0.14.1...v0.14.2) (2025-04-15)
 
 

package/custom-elements-manifest.config.js

@@ -3,8 +3,8 @@ import { customElementVsCodePlugin } from "custom-element-vs-code-integration"
 import { customElementVuejsPlugin } from "custom-element-vuejs-integration"
 
 export default {
-  globs: ["src/components/*/*.js"],
-  exclude: ["src/**/test/**/*.js", "src/**/stories/**/*.js"],
+  globs: ["src/components/*/*.ts"],
+  exclude: ["src/**/test/**/*.js", "src/**/stories/**/*.ts"],
   outdir: "./dist",
   /** Enable special handling for litelement */
   litelement: true,

package/dist/Accordion.d.ts

@@ -1,32 +1,53 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {boolean} open - The expanded state of the accordion.
- * @prop {string} label - The label (title) of the accordion.
- * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
  * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
-export class LeuAccordion extends LeuElement {
+declare class LeuAccordion extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /** @internal */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    /**
+     * The heading level of the accordion title. Must be between 1 and 6.
+     */
     headingLevel: number;
+    /**
+     * The expanded state of the accordion.
+     */
     open: boolean;
+    /**
+     * The label (title) of the accordion
+     */
     label: string;
+    /**
+     * The prefix of the accordion label. e.g. "01"
+     */
     labelPrefix: string;
     /**
      * Determines the heading tag of the accordion toggle.
      * The headingLevel shouldn't be used directly to render the heading tag
      * in order to avoid XSS issues.
-     * @returns {string} The heading tag of the accordion toggle.
      * @internal
      */
-    _getHeadingTag(): string;
+    private _getHeadingTag;
     /**
      * Toggles the accordion open state.
      * @internal
      */
-    _handleToggleClick(): void;
-    render(): import("lit-html").TemplateResult;
+    private _handleToggleClick;
+    render(): lit_html.TemplateResult;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-//# sourceMappingURL=Accordion.d.ts.map
+
+export { LeuAccordion };

package/dist/Accordion.js

@@ -1,6 +1,36 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BI1CxItv.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-x8UlIDDl.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);
@@ -148,50 +178,55 @@ slot[name="content"] {
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {boolean} open - The expanded state of the accordion.
- * @prop {string} label - The label (title) of the accordion.
- * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
  * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
 class LeuAccordion extends LeuElement {
-  constructor() {
-    super();
-    this.headingLevel = 2;
-    this.open = false;
-    this.label = "";
-    this.labelPrefix = "";
-  }
-
-  /**
-   * Determines the heading tag of the accordion toggle.
-   * The headingLevel shouldn't be used directly to render the heading tag
-   * in order to avoid XSS issues.
-   * @returns {string} The heading tag of the accordion toggle.
-   * @internal
-   */
-  _getHeadingTag() {
-    let level = 2;
-    if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = Math.floor(this.headingLevel);
+    constructor() {
+        super(...arguments);
+        /**
+         * The heading level of the accordion title. Must be between 1 and 6.
+         */
+        this.headingLevel = 2;
+        /**
+         * The expanded state of the accordion.
+         */
+        this.open = false;
+        /**
+         * The label (title) of the accordion
+         */
+        this.label = "";
+        /**
+         * The prefix of the accordion label. e.g. "01"
+         */
+        this.labelPrefix = "";
+        /* eslint-enable lit/binding-positions, lit/no-invalid-html */
     }
-    return `h${level}`;
-  }
-
-  /**
-   * Toggles the accordion open state.
-   * @internal
-   */
-  _handleToggleClick() {
-    this.open = !this.open;
-  }
-  render() {
-    const hTag = this._getHeadingTag();
-
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`<${unsafeStatic(hTag)} class="heading"><button
+    /**
+     * Determines the heading tag of the accordion toggle.
+     * The headingLevel shouldn't be used directly to render the heading tag
+     * in order to avoid XSS issues.
+     * @internal
+     */
+    _getHeadingTag() {
+        let level = 2;
+        if (this.headingLevel > 0 && this.headingLevel < 7) {
+            level = Math.floor(this.headingLevel);
+        }
+        return `h${level}`;
+    }
+    /**
+     * Toggles the accordion open state.
+     * @internal
+     */
+    _handleToggleClick() {
+        this.open = !this.open;
+    }
+    render() {
+        const hTag = this._getHeadingTag();
+        /* The eslint rules don't recognize html import from lit/static-html.js */
+        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+        return html `<${unsafeStatic(hTag)} class="heading"><button
         id="toggle"
         type="button"
         class="button"
@@ -199,7 +234,9 @@ class LeuAccordion extends LeuElement {
         aria-expanded="${this.open}"
         @click=${this._handleToggleClick}
       >
-        ${this.labelPrefix ? html`<span class="label-prefix">${this.labelPrefix}</span>` : nothing}
+        ${this.labelPrefix
+            ? html `<span class="label-prefix">${this.labelPrefix}</span>`
+            : nothing}
         <span class="label">${this.label}</span>
         <div class="plus"></div>
       </button></${unsafeStatic(hTag)}>
@@ -217,34 +254,25 @@ class LeuAccordion extends LeuElement {
         </div>
       </div>
       <hr class="divider" />`;
-  }
-  /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    }
 }
-_defineProperty(LeuAccordion, "styles", [LeuElement.styles, css_248z]);
+LeuAccordion.styles = [LeuElement.styles, css_248z];
 /** @internal */
-_defineProperty(LeuAccordion, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuAccordion, "properties", {
-  headingLevel: {
-    type: Number,
-    attribute: "heading-level",
-    reflect: true
-  },
-  open: {
-    type: Boolean,
-    reflect: true
-  },
-  label: {
-    type: String,
-    reflect: true
-  },
-  labelPrefix: {
-    type: String,
-    attribute: "label-prefix",
-    reflect: true
-  }
-});
+LeuAccordion.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: Number, attribute: "heading-level", reflect: true })
+], LeuAccordion.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuAccordion.prototype, "open", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuAccordion.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: "label-prefix", reflect: true })
+], LeuAccordion.prototype, "labelPrefix", void 0);
 
 export { LeuAccordion };

package/dist/Button.d.ts

@@ -1,46 +1,97 @@
-export const BUTTON_EXPANDED_OPTIONS: string[];
-export const BUTTON_SIZES: string[];
-export const BUTTON_TYPES: string[];
-export const BUTTON_VARIANTS: string[];
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { nothing } from 'lit';
+import { LeuIcon } from './Icon.js';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
+
+declare const BUTTON_VARIANTS: string[];
+
+declare const BUTTON_SIZES: string[];
+
+declare const BUTTON_TYPES: string[];
+
+declare const BUTTON_EXPANDED_OPTIONS: string[];
 /**
  * @tagname leu-button
  * @slot before - The icon to display before the label
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
  */
-export class LeuButton extends LeuElement {
-    label: any;
-    /** @type {string} */
-    size: string;
-    /** @type {string} */
-    variant: string;
-    /** @type {"button" | "submit" | "reset"} */
-    type: "button" | "submit" | "reset";
-    /** @type {string} */
-    componentRole: string;
-    /** @type {boolean} */
-    disabled: boolean;
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    round: boolean;
-    /** @type {boolean} */
-    active: boolean;
-    /** @type {boolean} - will be used on dark Background */
-    inverted: boolean;
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    fluid: boolean;
+declare class LeuButton extends LeuElement {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    static styles: lit.CSSResultGroup[];
     /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
+     * @internal
      */
-    expanded: ("true" | "false" | undefined);
-    renderExpandingIcon(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    /**
+     * @internal
+     */
+    hasSlotController: HasSlotController;
+    static properties: {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        componentRole: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        round: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        expanded: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        fluid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
+    renderExpandingIcon(): typeof nothing | lit_html.TemplateResult<1>;
     getAriaAttributes(): {
-        role: string;
+        role: any;
         label: any;
     };
     hasTextContent(): boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-import { nothing } from 'lit';
-//# sourceMappingURL=Button.d.ts.map
+
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };