@statistikzh/leu 0.15.1 → 0.16.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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,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-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

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

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.15.1";
+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-B84x5CPL.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-B84x5CPL.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-B84x5CPL.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';

package/dist/Placeholder.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`:host {
   --placeholder-font-regular: var(--leu-font-family-regular);

package/dist/Popup.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`:host {
   --popup-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-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.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-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuRadio } from './Radio.js';
 
 var css_248z = css`:host {

package/dist/Range.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`:host {
   --range-color: var(--leu-color-black-40);

package/dist/ScrollTop.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Select.js

@@ -2,7 +2,7 @@ import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-B84x5CPL.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/Spinner.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`@keyframes leu-spinner-rotate {
   from {

package/dist/Table.js

@@ -2,7 +2,7 @@ import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';
 import './_tslib-CNEFicEt.js';

package/dist/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-B84x5CPL.js';
+import { L as LeuElement } from './LeuElement-C0BZ_nPB.js';
 
 var css_248z = css`:host {
   clip: rect(0 0 0 0);