@statistikzh/leu 0.15.0 → 0.16.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.15.0"
+  ".": "0.16.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.16.0](https://github.com/statistikZH/leu/compare/leu-v0.15.1...leu-v0.16.0) (2025-07-31)
+
+
+### Features
+
+* **message:** implement message component ([#298](https://github.com/statistikZH/leu/issues/298)) ([18372de](https://github.com/statistikZH/leu/commit/18372de960057ea00f79af17cf575ace9fd955c6))
+
+## [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)
 
 

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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuButton } from './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/ChartWrapper.js

@@ -1,77 +1,85 @@
 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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 
-var css_248z = css`.title::slotted(h2) {
+var css_248z = css`.chart-wrapper {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+.chart-wrapper__title::slotted(h2) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-large-black-font);
   margin: 0 0 0.75rem;
 }
 @media (min-width: 840px) {
-.title::slotted(h2) {
+.chart-wrapper__title::slotted(h2) {
     margin: 0 0 1.25rem;
 }
   }
 @media (min-width: 1280px) {
-.title::slotted(h2) {
+.chart-wrapper__title::slotted(h2) {
     margin: 0 0 1.5rem;
 }
   }
-.title::slotted(h3) {
+.chart-wrapper__title::slotted(h3) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-medium-black-font);
   margin: 0 0 0.5rem;
 }
-.title::slotted(h4) {
+.chart-wrapper__title::slotted(h4) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-regular-black-font);
   margin: 0 0 0.5rem;
 }
-.description,
-.chart {
+.chart-wrapper__description,
+.chart-wrapper__chart {
   display: block;
   margin-bottom: 0.75rem;
 }
 @media (min-width: 840px) {
-.description,
-.chart {
+.chart-wrapper__description,
+.chart-wrapper__chart {
     margin-bottom: 1.25rem;
 }
   }
 @media (min-width: 1280px) {
-.description,
-.chart {
+.chart-wrapper__description,
+.chart-wrapper__chart {
     margin-bottom: 1.5rem;
 }
   }
-.description {
+.chart-wrapper__description {
   font: var(--leu-t-curve-small-regular-font);
   color: var(--leu-color-black-60);
 }
-.caption {
+.chart-wrapper__caption {
   font: var(--leu-t-curve-tiny-regular-font);
   color: var(--leu-color-black-60);
 }
-.ruler {
+.chart-wrapper__ruler {
   display: block;
   border: none;
   border-top: 1px solid var(--leu-color-black-transp-20);
   margin: 0.75rem 0;
 }
 @media (min-width: 1280px) {
-.ruler {
+.chart-wrapper__ruler {
     margin-top: 1rem;
     margin-bottom: 1rem;
 }
   }
-.download {
+.chart-wrapper__download {
   display: block;
   margin-left: -0.5rem;
 }
-.chart-container {
+.chart-wrapper__container {
   position: relative;
 }
-.spinner-container {
+.chart-wrapper__spinner-container {
   position: absolute;
   top: 0;
   left: 0;
@@ -112,27 +120,30 @@ class LeuChartWrapper extends LeuElement {
         const hasCaption = this.hasSlotController.test("caption");
         const hasDownload = this.hasSlotController.test("download");
         return html `
-      <figure>
-        <slot name="title" class="title"></slot>
+      <figure class="chart-wrapper">
+        <slot name="title" class="chart-wrapper__title"></slot>
         ${hasDescription
-            ? html `<slot name="description" class="description"></slot>`
+            ? html `<slot
+              name="description"
+              class="chart-wrapper__description"
+            ></slot>`
             : nothing}
-        <div class="chart-container">
-          <slot name="chart" class="chart"></slot>
+        <div class="chart-wrapper__container">
+          <slot name="chart" class="chart-wrapper__chart"></slot>
           ${this.pending
-            ? html `<div class="spinner-container">
-                <leu-spinner class="spinner"></leu-spinner>
+            ? html `<div class="chart-wrapper__spinner-container">
+                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
               </div>`
             : nothing}
         </div>
         ${hasCaption
             ? html `<figcaption>
-              <slot name="caption" class="caption"></slot>
+              <slot name="caption" class="chart-wrapper__caption"></slot>
             </figcaption>`
             : nothing}
-        <hr class="ruler" />
+        <hr class="chart-wrapper__ruler" />
         ${hasDownload
-            ? html `<slot name="download" class="download"></slot>`
+            ? html `<slot name="download" class="chart-wrapper__download"></slot>`
             : nothing}
       </figure>
     `;

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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BhAmogDy.js';
+import './LeuElement-C0BZ_nPB.js';
 
 const SIZES = {
     regular: "regular",

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-BhAmogDy.js';
+import './LeuElement-C0BZ_nPB.js';
 
 /**
  * @slot - The content of the chip

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BhAmogDy.js';
+import './LeuElement-C0BZ_nPB.js';
 
 const SIZES = {
     small: "small",

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 

package/dist/Dropdown.js

@@ -1,6 +1,6 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/Icon.js

@@ -1,5 +1,5 @@
 import { css, html, svg } from 'lit';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`:host {
   display: contents;

package/dist/Input.js

@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/{LeuElement-BhAmogDy.js → LeuElement-C0BZ_nPB.js}

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

package/dist/Menu.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/Message.d.ts

@@ -0,0 +1,63 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { LeuIcon } from './Icon.js';
+
+/**
+ * @tagname leu-message
+ * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
+ * @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
+ * @slot cta - A call to action button that is only allowed for `size=large`
+ * @fires leu:remove - Fired when the close button is clicked.
+ */
+declare class LeuMessage extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /**
+     * @internal
+     */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    /**
+     * @internal
+     */
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+    };
+    /**
+     * @internal
+     */
+    static iconToTypeMap: {
+        info: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    /**
+     * The type of the message. `error` and `success` will be displayed as filled boxes.
+     */
+    type: "error" | "success" | "info" | "warning";
+    /**
+     * The size of the message. A call to action button is only allowed for `large` messages.
+     */
+    size: "regular" | "large";
+    /**
+     * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
+     */
+    removable: boolean;
+    /**
+     * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
+     */
+    popup: boolean;
+    private hasSlotController;
+    protected renderIcon(): lit_html.TemplateResult<1>;
+    protected handleRemove(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuMessage };

package/dist/Message.js

@@ -0,0 +1,268 @@
+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-C0BZ_nPB.js';
+import { LeuIcon } from './Icon.js';
+import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
+
+var css_248z = css`:host {
+  font-family: var(--leu-font-family-regular);
+}
+.message {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  padding: var(--_padding);
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  background-color: var(--leu-color-black-0);
+  color: var(--_accent-color);
+}
+.message::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0.25rem;
+  height: 100%;
+  background-color: var(--_accent-color);
+}
+.message--error {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+.message--warning {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+.message--success {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-green));
+}
+.message--info {
+  --_accent-color: var(
+    --leu-message-accent-color,
+    var(--leu-color-accent-violet)
+  );
+}
+.message--filled {
+  background-color: var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+.message--filled::before {
+  content: none;
+}
+.message--regular {
+  --_padding: 0.75rem;
+  --_icon-size: 24px;
+}
+@media (min-width: 1024px) {
+.message--regular {
+    --_padding: 1rem;
+}
+  }
+.message--large {
+  --_padding: 1rem;
+  --_icon-size: 32px;
+}
+@media (max-width: 599px) {
+.message--large {
+    flex-flow: column;
+    align-items: start;
+    gap: 0.75rem;
+}
+  }
+@media (min-width: 600px) {
+.message--large {
+    --_padding: 1.25rem;
+}
+  }
+@media (min-width: 1024px) {
+.message--large {
+    --_padding: 1.5rem;
+}
+  }
+.message--popup {
+  box-shadow: var(--leu-box-shadow-regular);
+}
+.message__icon {
+  --leu-icon-size: var(--_icon-size);
+
+  display: block;
+  flex: 0 0 min-content;
+}
+.message__content {
+  flex: 1 1 auto;
+  font: var(--leu-t-curve-small-regular-font);
+  margin: 0 0.5rem;
+}
+@media (min-width: 600px) {
+.message__content {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+}
+  }
+@media (min-width: 1024px) {
+.message__content {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+  }
+@media (max-width: 599px) {
+.message--large .message__content {
+    margin-left: 0;
+    margin-right: 0;
+}
+  }
+.message__content ::slotted(strong) {
+  font-family: var(--leu-font-family-black);
+  font-weight: normal;
+}
+.message__cta {
+  display: block;
+  flex: 0 0 min-content;
+  margin-right: 0.5rem;
+}
+.message__remove {
+  flex: 0 0 min-content;
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--leu-color-black-60);
+  cursor: pointer;
+}
+.message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-black-40);
+}
+.message--filled .message__remove {
+  color: var(--leu-color-black-0);
+}
+.message--filled .message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-white-transp-70);
+}
+.message--large .message__remove {
+  position: absolute;
+  top: var(--_padding);
+  right: var(--_padding);
+}
+@media (min-width: 600px) {
+.message--large .message__remove {
+    position: static;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+}
+  }
+.message__remove-icon {
+  --leu-icon-size: 1.5rem;
+}
+`;
+
+/**
+ * @tagname leu-message
+ * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
+ * @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
+ * @slot cta - A call to action button that is only allowed for `size=large`
+ * @fires leu:remove - Fired when the close button is clicked.
+ */
+class LeuMessage extends LeuElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of the message. `error` and `success` will be displayed as filled boxes.
+         */
+        this.type = "success";
+        /**
+         * The size of the message. A call to action button is only allowed for `large` messages.
+         */
+        this.size = "regular";
+        /**
+         * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
+         */
+        this.removable = false;
+        /**
+         * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
+         */
+        this.popup = false;
+        this.hasSlotController = new HasSlotController(this, ["cta"]);
+    }
+    renderIcon() {
+        const name = LeuMessage.iconToTypeMap[this.type];
+        return html `<leu-icon class="message__icon" name=${name}></leu-icon>`;
+    }
+    handleRemove() {
+        this.dispatchEvent(new CustomEvent("leu:remove", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const hasCta = this.hasSlotController.test("cta");
+        const classes = classMap({
+            message: true,
+            "message--filled": this.type === "error" || this.type === "success",
+            "message--popup": this.popup,
+            [`message--${this.size}`]: true,
+            [`message--${this.type}`]: true,
+        });
+        return html `
+      <div class="${classes}">
+        ${this.renderIcon()}
+        <p class="message__content">
+          <slot></slot>
+        </p>
+        ${hasCta
+            ? html `<slot class="message__cta" name="cta"></slot>`
+            : nothing}
+        ${this.removable
+            ? html `<button
+              class="message__remove"
+              aria-label="Meldung schliessen"
+              @click=${this.handleRemove}
+            >
+              <leu-icon class="message__remove-icon" name="close"></leu-icon>
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+LeuMessage.styles = [LeuElement.styles, css_248z];
+/**
+ * @internal
+ */
+LeuMessage.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+/**
+ * @internal
+ */
+LeuMessage.dependencies = {
+    "leu-icon": LeuIcon,
+};
+/**
+ * @internal
+ */
+LeuMessage.iconToTypeMap = {
+    info: "getInformation",
+    error: "caution",
+    success: "confirm",
+    warning: "caution",
+};
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMessage.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuMessage.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMessage.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuMessage.prototype, "popup", void 0);
+
+export { LeuMessage };

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-BhAmogDy.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';