@statistikzh/leu 0.14.4 → 0.15.1

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.15.1](https://github.com/statistikZH/leu/compare/leu-v0.15.0...leu-v0.15.1) (2025-07-03)
+
+
+### Bug Fixes
+
+* **chart-wrapper:** fix directory name and add export ([9ec09fb](https://github.com/statistikZH/leu/commit/9ec09fbd715ee71977f52632627ca10a77115f53))
+* **chart-wrapper:** reset user agent default styling ([f1cd090](https://github.com/statistikZH/leu/commit/f1cd0900a096a7ac5cc60faffc6c56ebf9363909))
+* **theme:** explicitly define a font weight to avoid font synthesis ([2605cc9](https://github.com/statistikZH/leu/commit/2605cc9105c1b0e9439f272d09b5ec7d5f81ba33))
+
+## [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)
 
 

package/dist/Accordion.js

@@ -1,36 +1,8 @@
+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-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;
-};
+import { L as LeuElement } from './LeuElement-B84x5CPL.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);

package/dist/Button.d.ts

@@ -1,31 +1,20 @@
 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
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
 declare class LeuButton extends LeuElement {
     static dependencies: {
         "leu-icon": typeof LeuIcon;
     };
     static styles: lit.CSSResultGroup[];
-    /**
-     * @internal
-     */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -34,64 +23,63 @@ declare class LeuButton extends LeuElement {
         customElements?: CustomElementRegistry;
         registry?: CustomElementRegistry;
     };
+    private hasSlotController;
     /**
-     * @internal
+     * `aria-label` of the underlying button elements.
+     * Use it to provide a label when only an icon is visible.
      */
-    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: any;
-        label: any;
-    };
-    hasTextContent(): boolean;
+    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";
+    /**
+     * The `role` of the underlying button element.
+     */
+    componentRole?: string;
+    /**
+     * Whether the button is disabled or not.
+     * @type {boolean}
+     */
+    disabled: boolean;
+    /**
+     * Whether the button should be round.
+     * Can only be applied when the button contains an icon without a visible label.
+     * @type {boolean}
+     */
+    round: 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;
+    /**
+     * Wheter the colors should be inverted. For use on dark backgrounds.
+     */
+    inverted: boolean;
+    /**
+     * 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";
+    /**
+     * 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>;
 }
 
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };
+export { LeuButton };

package/dist/Button.js

@@ -1,13 +1,15 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 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-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-B84x5CPL.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 
 /**
  * All roles that are associated with a aria-checked attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
  */
 const ARIA_CHECKED_ROLES = [
     "checkbox",
@@ -19,7 +21,7 @@ const ARIA_CHECKED_ROLES = [
 ];
 /**
  * All roles that are associated with a aria-selected attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
  */
 const ARIA_SELECTED_ROLES = [
     "gridcell",
@@ -334,60 +336,62 @@ button.ghost.inverted:disabled {
 }
 `;
 
-/*
-Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
-Live Demo: zh.ch
-*/
-const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
-Object.freeze(BUTTON_VARIANTS);
-const BUTTON_SIZES = ["regular", "small"];
-Object.freeze(BUTTON_SIZES);
-const BUTTON_TYPES = ["button", "submit", "reset"];
-Object.freeze(BUTTON_TYPES);
-const BUTTON_EXPANDED_OPTIONS = ["true", "false"];
-Object.freeze(BUTTON_EXPANDED_OPTIONS);
 /**
  * @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
  */
 class LeuButton extends LeuElement {
     constructor() {
-        super();
-        /**
-         * @internal
-         */
+        super(...arguments);
         this.hasSlotController = new HasSlotController(this, [
             "before",
             "after",
             "[default]",
         ]);
-        /** @type {string} */
+        /**
+         * `aria-label` of the underlying button elements.
+         * Use it to provide a label when only an icon is visible.
+         */
         this.label = null;
-        /** @type {string} */
+        /**
+         * The size of the button.
+         */
         this.size = "regular";
-        /** @type {string} */
+        /**
+         * The visual variant of the button.
+         */
         this.variant = "primary";
-        /** @type {"button" | "submit" | "reset"} */
+        /**
+         * The `type` of the underlying button element.
+         */
         this.type = "button";
-        /** @type {string} */
-        this.componentRole = undefined;
-        /** @type {boolean} */
+        /**
+         * Whether the button is disabled or not.
+         * @type {boolean}
+         */
         this.disabled = false;
-        /** @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}
+         */
         this.round = false;
-        /** @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.
+         */
         this.active = false;
-        /** @type {boolean} - will be used on dark Background */
+        /**
+         * Wheter the colors should be inverted. For use on dark backgrounds.
+         */
         this.inverted = false;
-        /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-        this.fluid = false;
         /**
-         * Only taken into account if variant is "ghost"
-         * @type {("true" | "false" | undefined)}
+         * Alters the shape of the button to be full width of its parent container
          */
-        this.expanded = undefined;
+        this.fluid = false;
     }
     renderExpandingIcon() {
         if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
@@ -402,6 +406,7 @@ class LeuButton extends LeuElement {
             role: this.componentRole,
             label: this.label,
         };
+        // TODO: checked and selected roles are not mutually exclusive
         if (this.componentRole) {
             if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
                 attributes.checked = this.active ? "true" : "false";
@@ -459,25 +464,42 @@ LeuButton.dependencies = {
     "leu-icon": LeuIcon,
 };
 LeuButton.styles = [LeuElement.styles, css_248z];
-/**
- * @internal
- */
 LeuButton.shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
 };
-LeuButton.properties = {
-    label: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    componentRole: { type: String, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    round: { type: Boolean, reflect: true },
-    active: { type: Boolean, reflect: true },
-    inverted: { type: Boolean, reflect: true },
-    expanded: { type: String, reflect: true },
-    fluid: { type: Boolean, reflect: true },
-};
-
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "componentRole", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuButton.prototype, "fluid", void 0);
+
+export { LeuButton };

package/dist/ButtonGroup.d.ts

@@ -3,26 +3,26 @@ import * as lit from 'lit';
 import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
 
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @tagname leu-button-group
  * @slot - Slot for the buttons
- * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
 declare class LeuButtonGroup extends LeuElement {
     static styles: lit.CSSResultGroup[];
     private _items;
     /**
-     * @param {import("../button/Button.js").LeuButton} button
-     * @returns {string}
+     * Retrieves the value or the text content of a given LeuButton element.
      */
-    static getButtonValue(button: any): any;
-    get value(): any;
-    set value(newValue: any);
-    _handleSlotChange(): void;
+    private static getButtonValue;
     /**
-     * @param {import("../button/Button.js").LeuButton} button
+     * The value of the currently selected (active) button
      */
-    _handleButtonClick(button: any): void;
+    get value(): string;
+    set value(newValue: string);
+    private _handleSlotChange;
+    private _handleButtonClick;
     render(): lit_html.TemplateResult<1>;
 }
 

package/dist/ButtonGroup.js

@@ -1,5 +1,12 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
+import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { LeuButton } from './Button.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/directives/class-map.js';
+import 'lit/directives/if-defined.js';
+import 'lit/decorators.js';
+import './Icon.js';
+import './hasSlotController-Bm2tipvG.js';
 
 var css_248z = css`.group {
   display: flex;
@@ -9,23 +16,37 @@ var css_248z = css`.group {
 `;
 
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @tagname leu-button-group
  * @slot - Slot for the buttons
- * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
 class LeuButtonGroup extends LeuElement {
     constructor() {
         super(...arguments);
         this._items = [];
+        this._handleButtonClick = (event) => {
+            const button = event.currentTarget;
+            if (!button.active) {
+                this.value = LeuButtonGroup.getButtonValue(button);
+                this.dispatchEvent(new CustomEvent("input", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: LeuButtonGroup.getButtonValue(button) },
+                }));
+            }
+        };
     }
     /**
-     * @param {import("../button/Button.js").LeuButton} button
-     * @returns {string}
+     * Retrieves the value or the text content of a given LeuButton element.
      */
     static getButtonValue(button) {
-        return button.getAttribute("value") ?? button.innerText.trim();
+        return button.getAttribute("value") ?? button.textContent.trim();
     }
+    /**
+     * The value of the currently selected (active) button
+     */
     get value() {
         const activeButton = this._items.find((item) => item.active);
         return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null;
@@ -47,11 +68,13 @@ class LeuButtonGroup extends LeuElement {
             item.removeEventListener("click", this._handleButtonClick);
         });
         const slot = this.shadowRoot.querySelector("slot");
-        this._items = slot.assignedElements({ flatten: true });
+        this._items = slot
+            .assignedElements({ flatten: true })
+            .filter((el) => el instanceof LeuButton);
         let foundActiveButtonBefore = false;
         this._items.forEach((item) => {
             /* eslint-disable no-param-reassign */
-            item.addEventListener("click", () => this._handleButtonClick(item));
+            item.addEventListener("click", this._handleButtonClick);
             item.componentRole = "menuitemradio";
             /**
              * In case there are multiple active buttons
@@ -66,19 +89,6 @@ class LeuButtonGroup extends LeuElement {
             /* eslint-enable no-param-reassign */
         });
     }
-    /**
-     * @param {import("../button/Button.js").LeuButton} button
-     */
-    _handleButtonClick(button) {
-        if (!button.active) {
-            this.value = LeuButtonGroup.getButtonValue(button);
-            this.dispatchEvent(new CustomEvent("input", {
-                bubbles: true,
-                composed: true,
-                detail: { value: LeuButtonGroup.getButtonValue(button) },
-            }));
-        }
-    }
     render() {
         return html `
       <div role="menubar" class="group">

package/dist/ChartWrapper.d.ts

@@ -0,0 +1,38 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
+import { LeuSpinner } from './Spinner.js';
+
+/**
+ * A wrapper element for charts.
+ * @tagname leu-chart-wrapper
+ * @slot title - The title of the chart. Use a heading tag (h2-4) depending on your context.
+ * @slot description - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+ * @slot chart - The actual chart
+ * @slot caption - A caption for the chart, e.g. a source or explanation of the data.
+ * @slot download - A download button or dropdown to export the chart in different formats.
+ */
+declare class LeuChartWrapper extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static dependencies: {
+        "leu-spinner": typeof LeuSpinner;
+    };
+    /**
+     * Whether the chart is currently loading or not.
+     * When set to `true`, a spinner will be shown in the chart container.
+     */
+    pending: boolean;
+    hasSlotController: HasSlotController;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuChartWrapper };