@statistikzh/leu 0.14.3 → 0.15.0

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/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.15.0"
+}

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,20 @@
 # Changelog
 
+## [0.15.0](https://github.com/statistikZH/leu/compare/leu-v0.14.4...leu-v0.15.0) (2025-07-03)
+
+
+### Features
+
+* **chart-wrapper:** create a chart wrapper component ([2478fd0](https://github.com/statistikZH/leu/commit/2478fd0d76631d43c650ecb82ae275386243c438))
+* **placeholder:** implement placeholder component ([22aa5e2](https://github.com/statistikZH/leu/commit/22aa5e2cac68bf1fdb0bcbd345307e04cc5b9fad))
+
+## [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)
 
 

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-Dd6zm9XF.js';
-//# sourceMappingURL=Accordion.d.ts.map
+
+export { LeuAccordion };

package/dist/Accordion.js

@@ -1,6 +1,8 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+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-BhAmogDy.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);
@@ -148,50 +150,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 +206,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 +226,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,85 @@
-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 { LeuIcon } from './Icon.js';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @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
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
-export class LeuButton extends LeuElement {
-    label: any;
-    /** @type {string} */
-    size: string;
-    /** @type {string} */
-    variant: string;
-    /** @type {"button" | "submit" | "reset"} */
+declare class LeuButton extends LeuElement {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    private hasSlotController;
+    /**
+     * `aria-label` of the underlying button elements.
+     * Use it to provide a label when only an icon is visible.
+     */
+    label: null | string;
+    /**
+     * The size of the button.
+     */
+    size: "regular" | "small";
+    /**
+     * The visual variant of the button.
+     */
+    variant: "primary" | "secondary" | "ghost";
+    /**
+     * The `type` of the underlying button element.
+     */
     type: "button" | "submit" | "reset";
-    /** @type {string} */
-    componentRole: string;
-    /** @type {boolean} */
+    /**
+     * The `role` of the underlying button element.
+     */
+    componentRole?: string;
+    /**
+     * Whether the button is disabled or not.
+     * @type {boolean}
+     */
     disabled: boolean;
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    /**
+     * Whether the button should be round.
+     * Can only be applied when the button contains an icon without a visible label.
+     * @type {boolean}
+     */
     round: boolean;
-    /** @type {boolean} */
+    /**
+     * Whether the button is active or not.
+     * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+     */
     active: boolean;
-    /** @type {boolean} - will be used on dark Background */
+    /**
+     * Wheter the colors should be inverted. For use on dark backgrounds.
+     */
     inverted: boolean;
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    fluid: boolean;
     /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
+     * Whether the button is expanded or not.
+     * Only has an effect on the variant `ghost` to show an expanding icon.
+     * If the property is not set, the icon will not be shown.
+     * If it is set, the icon will either show an expanded or collapsed state.
      */
-    expanded: ("true" | "false" | undefined);
-    renderExpandingIcon(): typeof nothing | import("lit-html").TemplateResult<1>;
-    getAriaAttributes(): {
-        role: string;
-        label: any;
-    };
-    hasTextContent(): boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    expanded?: "true" | "false";
+    /**
+     * Alters the shape of the button to be full width of its parent container
+     */
+    fluid: boolean;
+    private renderExpandingIcon;
+    private getAriaAttributes;
+    private hasTextContent;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-import { nothing } from 'lit';
-//# sourceMappingURL=Button.d.ts.map
+
+export { LeuButton };