@lmvz-ds/components 0.27.1 → 0.28.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-12T11:14:23",
+  "timestamp": "2026-06-15T08:54:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -452,11 +452,15 @@
       ],
       "states": [],
       "dependents": [
+        "lmvz-message",
         "lmvz-modal",
         "lmvz-snackbar"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "lmvz-message": [
+          "lmvz-button"
+        ],
         "lmvz-modal": [
           "lmvz-button"
         ],
@@ -1582,11 +1586,15 @@
       "parts": [],
       "states": [],
       "dependents": [
+        "lmvz-message",
         "lmvz-modal",
         "lmvz-snackbar"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "lmvz-message": [
+          "lmvz-icon"
+        ],
         "lmvz-modal": [
           "lmvz-icon"
         ],
@@ -5777,6 +5785,256 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/lmvz-message/lmvz-message.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-message",
+      "readme": "# lmvz-message\n\nA static inline message block that displays contextual information to the user. Use messages to present non-blocking feedback, warnings, or informational content within the page flow (distinct from dismissable notifications like snackbars or toast messages).\n\n**Design source:** [Figma component node 11010:2344](https://www.figma.com/design/...)\n\n## Variant Scope\n\nThe message component currently supports `neutral` and `warning` type variants. The following variants are deferred to O1:\n\n- `success` — requires additional design specification for success-specific color and icon semantics\n- `error` — requires accessibility review of assertive live-region behavior in inline context\n- `neutral-grey` — requires token alignment and visual distinction guidelines relative to `neutral`\n\n## Type Semantics and Accessibility\n\nThe message's `type` prop controls visual appearance and can influence accessibility semantics:\n\n| Type | Default Icon | Color Token | Notes |\n|------|--------------|-------------|-------|\n| `neutral` | Info icon | `color-status-active` | Informational message. Note: The token name does not semantically align with \"neutral\"; this dissonance reflects current design token constraints and may be reconsidered in future iterations. |\n| `warning` | Warning icon | `color-status-warning` | Warning message requiring user attention. |\n\n## ARIA and Accessibility\n\n- The message host element has a dynamic `role` that changes with the `live` prop: `role=\"note\"` by default (non-live), `role=\"status\"` when `live=\"polite\"`, and `role=\"alert\"` when `live=\"assertive\"`.\n- The `live` prop is opt-in. When set, it controls live-region semantics through implicit role semantics: `live=\"polite\"` provides non-blocking announcements via `role=\"status\"`, `live=\"assertive\"` provides interrupting announcements via `role=\"alert\"`. The default `live=\"off\"` sets `role=\"note\"`, rendering the message as static content without live-region semantics.\n- The leading icon is marked `aria-hidden=\"true\"` because its information is redundant with the visual type indicator and color coding.\n- When `dismissible=\"true\"`, the dismiss button's accessible name is set via the `closeLabel` prop (default: `'Schliessen'`). Provide an appropriate, localized close label to ensure keyboard and screen-reader users can identify the button's purpose.\n- The optional action button uses its `actionLabel` text as its accessible name via native button semantics.\n\n## Content and Slots\n\nThe message component uses a **default slot** to accept inline content. Only inline-level HTML elements are permitted as direct slot children (e.g. `<strong>`, `<em>`, `<a>`, `<span>`, `<code>`). Block-level elements (`<div>`, `<p>`, `<h1>`–`<h6>`, etc.) are not allowed.\n\nWhen `@lmvz-ds/aria-validation` is enabled (development only), the component emits a `console.warn` for each block-level element tag encountered in the slot. This validation runs per render pass and does not fire in production builds.\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `'neutral' \\| 'warning'` | `'neutral'` | Message type controlling icon, color, and semantics. |\n| `live` | `'off' \\| 'polite' \\| 'assertive'` | `'off'` | Controls live-region semantics via implicit roles: `'off'` sets `role=\"note\"` (static content), `'polite'` sets `role=\"status\"` (polite live region), `'assertive'` sets `role=\"alert\"` (assertive live region). |\n| `leadingIcon` | `boolean` | `true` | Show the type-specific leading icon (info for neutral, warning triangle for warning). |\n| `dismissible` | `boolean` | `false` | Show the dismiss button. When `dismissible=\"true\"`, the `closeLabel` prop must be set to a meaningful, localized label. |\n| `closeLabel` | `string` | `'Schliessen'` | Accessible label for the dismiss button. Required and meaningful when `dismissible=\"true\"`. |\n| `actionLabel` | `string \\| undefined` | `undefined` | Optional action button label. When set, an action button is rendered. |\n\n## Events\n\n| Event | Type | Fired When |\n|-------|------|-----------|\n| `lmvzDismiss` | `CustomEvent<void>` | The user clicks the dismiss button (only emitted when `dismissible=\"true\"`). |\n| `lmvzAction` | `CustomEvent<void>` | The user clicks the action button (only emitted when `actionLabel` is set). |\n\n## Examples\n\n### Basic Neutral Message\n\n```html\n<lmvz-message type=\"neutral\" leadingIcon=\"true\">\n  This is an informational message.\n</lmvz-message>\n```\n\n### Dismissible Warning\n\n```html\n<lmvz-message type=\"warning\" dismissible=\"true\" closeLabel=\"Dismiss\">\n  Please review the following before proceeding.\n</lmvz-message>\n```\n\n```typescript\nconst message = document.querySelector('lmvz-message');\nmessage.addEventListener('lmvzDismiss', () => {\n  console.log('Message dismissed');\n});\n```\n\n### Message with Action\n\n```html\n<lmvz-message type=\"neutral\" actionLabel=\"Extend\">\n  Your session is about to expire.\n</lmvz-message>\n```\n\n```typescript\nconst message = document.querySelector('lmvz-message');\nmessage.addEventListener('lmvzAction', () => {\n  console.log('User requested action');\n});\n```\n\n### Message with Inline Content\n\n```html\n<lmvz-message type=\"neutral\">\n  Please visit <a href=\"/help\">our help page</a> for more information.\n</lmvz-message>\n```\n\nOnly inline elements like `<a>`, `<strong>`, and `<em>` are permitted in the slot. Block-level elements are not allowed.\n\n### Live Region (Screen Reader Announcement)\n\n```html\n<lmvz-message type=\"warning\" live=\"polite\">\n  A warning has been detected.\n</lmvz-message>\n```\n\nWhen `live` is set to `polite` or `assertive`, the message is announced to screen readers at the appropriate politeness level.\n",
+      "docs": "A static inline message block that displays contextual information to the user. Use messages to present non-blocking feedback, warnings, or informational content within the page flow (distinct from dismissable notifications like snackbars or toast messages).\n\n**Design source:** [Figma component node 11010:2344](https://www.figma.com/design/...)",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "actionLabel",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "action-label",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "close-label",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Schliessen'"
+            }
+          ],
+          "default": "'Schliessen'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "dismissible",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "leadingIcon",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "leading-icon",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "live",
+          "type": "\"assertive\" | \"off\" | \"polite\"",
+          "complexType": {
+            "original": "'off' | 'polite' | 'assertive'",
+            "resolved": "\"assertive\" | \"off\" | \"polite\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "live",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'off'"
+            }
+          ],
+          "default": "'off'",
+          "values": [
+            {
+              "value": "assertive",
+              "type": "string"
+            },
+            {
+              "value": "off",
+              "type": "string"
+            },
+            {
+              "value": "polite",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"neutral\" | \"warning\"",
+          "complexType": {
+            "original": "Message.Type",
+            "resolved": "\"neutral\" | \"warning\"",
+            "references": {
+              "Message": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Message",
+                "referenceLocation": "Message"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'neutral'"
+            }
+          ],
+          "default": "'neutral'",
+          "values": [
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "lmvzAction",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": false,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "lmvzDismiss",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": false,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "lmvz-button",
+        "lmvz-icon"
+      ],
+      "dependencyGraph": {
+        "lmvz-message": [
+          "lmvz-button",
+          "lmvz-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/lmvz-modal/lmvz-modal.tsx",
       "encapsulation": "shadow",
@@ -6818,6 +7076,92 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/lmvz-spinner/lmvz-spinner.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-spinner",
+      "readme": "# lmvz-spinner\n\n\n",
+      "docs": "`lmvz-spinner` is an indeterminate progress indicator that signals an ongoing background operation.\n\nSet `aria-label` when the spinner is the primary loading indicator in its context.\nOmit it when decorative (e.g., inside a button that already announces its loading state).",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "ariaLabel",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "aria-label",
+          "reflectToAttr": true,
+          "docs": "Accessible name for assistive technology.\nLeave unset for decorative spinners so the element stays hidden from the accessibility tree.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"small\"",
+          "complexType": {
+            "original": "'small' | 'large'",
+            "resolved": "\"large\" | \"small\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Size of the spinner.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'small'"
+            }
+          ],
+          "default": "'small'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "indicator",
+          "docs": ""
+        }
+      ],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/lmvz-tab/lmvz-tab.tsx",
       "encapsulation": "shadow",
@@ -7590,6 +7934,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/index.d.ts::Message": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.d.ts"
+    },
     "src/api/index.d.ts::Snackbar": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.27.1",
+  "version": "0.28.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -99,6 +99,14 @@
     "./lmvz-radio": {
       "import": "./components/lmvz-radio.js",
       "types": "./components/lmvz-radio.d.ts"
+    },
+    "./lmvz-message": {
+      "import": "./components/lmvz-message.js",
+      "types": "./components/lmvz-message.d.ts"
+    },
+    "./lmvz-spinner": {
+      "import": "./components/lmvz-spinner.js",
+      "types": "./components/lmvz-spinner.d.ts"
     }
   },
   "main": "./index.cjs.js",

package/types/api/ds.constants.d.ts

@@ -34,6 +34,10 @@ export declare namespace Input {
     type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 }
+export declare const messageTypes: readonly ["neutral", "warning"];
+export declare namespace Message {
+    type Type = (typeof messageTypes)[number];
+}
 export declare const snackbarStatuses: readonly ["success", "warning", "error"];
 export declare const snackbarPriorities: readonly ["low", "normal", "high"];
 export declare const snackbarDismissReasons: readonly ["timeout", "manual", "action", "overridden", "swallowed"];

package/types/components/lmvz-message/lmvz-message.d.ts

@@ -0,0 +1,20 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { Message } from '../../api';
+export declare class LmvzMessage {
+    private messageSlot?;
+    private readonly warnedTags;
+    type: Message.Type;
+    live: 'off' | 'polite' | 'assertive';
+    leadingIcon: boolean;
+    dismissible: boolean;
+    closeLabel: string;
+    actionLabel?: string;
+    lmvzDismiss: EventEmitter<void>;
+    lmvzAction: EventEmitter<void>;
+    componentDidLoad(): void;
+    private readonly handleDismissClick;
+    private readonly handleActionClick;
+    private readonly handleSlotChange;
+    private checkSlotContent;
+    render(): any;
+}

package/types/components/lmvz-message/public.d.ts

@@ -0,0 +1 @@
+export type { Message } from '../../api';

package/types/components/lmvz-spinner/lmvz-spinner.d.ts

@@ -0,0 +1,5 @@
+export declare class LmvzSpinner {
+    size: 'small' | 'large';
+    ariaLabel?: string;
+    render(): any;
+}

package/types/components.d.ts

@@ -391,6 +391,29 @@ export declare namespace Components {
          */
         "ti": number;
     }
+    export interface LmvzMessage {
+        "actionLabel"?: string;
+        /**
+         * @default 'Schliessen'
+         */
+        "closeLabel": string;
+        /**
+         * @default false
+         */
+        "dismissible": boolean;
+        /**
+         * @default true
+         */
+        "leadingIcon": boolean;
+        /**
+         * @default 'off'
+         */
+        "live": 'off' | 'polite' | 'assertive';
+        /**
+         * @default 'neutral'
+         */
+        "type": Message.Type;
+    }
     /**
      * Native dialog-backed modal with inline `header`, body, and `actions` regions.
      * The implementation intentionally ignores Figma preview container sizes and instead sizes against the viewport plus LMVZ spacing tokens.
@@ -549,6 +572,22 @@ export declare namespace Components {
          */
         "status": Snackbar.Status;
     }
+    /**
+     * `lmvz-spinner` is an indeterminate progress indicator that signals an ongoing background operation.
+     * Set `aria-label` when the spinner is the primary loading indicator in its context.
+     * Omit it when decorative (e.g., inside a button that already announces its loading state).
+     */
+    export interface LmvzSpinner {
+        /**
+         * Accessible name for assistive technology. Leave unset for decorative spinners so the element stays hidden from the accessibility tree.
+         */
+        "ariaLabel"?: string;
+        /**
+         * Size of the spinner.
+         * @default 'small'
+         */
+        "size": 'small' | 'large';
+    }
     /**
      * The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.
      * Selection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,
@@ -1065,6 +1104,31 @@ export declare namespace JSX {
          */
         "ti"?: number;
     }
+    export interface LmvzMessage {
+        "actionLabel"?: string;
+        /**
+         * @default 'Schliessen'
+         */
+        "closeLabel"?: string;
+        /**
+         * @default false
+         */
+        "dismissible"?: boolean;
+        /**
+         * @default true
+         */
+        "leadingIcon"?: boolean;
+        /**
+         * @default 'off'
+         */
+        "live"?: 'off' | 'polite' | 'assertive';
+        "onLmvzAction"?: (event: LmvzMessageCustomEvent<void>) => void;
+        "onLmvzDismiss"?: (event: LmvzMessageCustomEvent<void>) => void;
+        /**
+         * @default 'neutral'
+         */
+        "type"?: Message.Type;
+    }
     /**
      * Native dialog-backed modal with inline `header`, body, and `actions` regions.
      * The implementation intentionally ignores Figma preview container sizes and instead sizes against the viewport plus LMVZ spacing tokens.
@@ -1230,6 +1294,22 @@ export declare namespace JSX {
          */
         "status"?: Snackbar.Status;
     }
+    /**
+     * `lmvz-spinner` is an indeterminate progress indicator that signals an ongoing background operation.
+     * Set `aria-label` when the spinner is the primary loading indicator in its context.
+     * Omit it when decorative (e.g., inside a button that already announces its loading state).
+     */
+    export interface LmvzSpinner {
+        /**
+         * Accessible name for assistive technology. Leave unset for decorative spinners so the element stays hidden from the accessibility tree.
+         */
+        "ariaLabel"?: string;
+        /**
+         * Size of the spinner.
+         * @default 'small'
+         */
+        "size"?: 'small' | 'large';
+    }
     /**
      * The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.
      * Selection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,
@@ -1417,6 +1497,14 @@ export declare namespace JSX {
         "role": string;
         "ti": number;
     }
+    export interface LmvzMessageAttributes {
+        "type": Message.Type;
+        "live": 'off' | 'polite' | 'assertive';
+        "leadingIcon": boolean;
+        "dismissible": boolean;
+        "closeLabel": string;
+        "actionLabel": string;
+    }
     export interface LmvzModalAttributes {
         "open": boolean;
         "closeLabel": string;
@@ -1448,6 +1536,10 @@ export declare namespace JSX {
         "priority": Snackbar.Priority;
         "actionLabel": string;
     }
+    export interface LmvzSpinnerAttributes {
+        "size": 'small' | 'large';
+        "ariaLabel": string;
+    }
     export interface LmvzTabAttributes {
         "value": string;
         "disabled": boolean;
@@ -1479,10 +1571,12 @@ export declare namespace JSX {
         "lmvz-icon": Omit<LmvzIcon, keyof LmvzIconAttributes> & { [K in keyof LmvzIcon & keyof LmvzIconAttributes]?: LmvzIcon[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `attr:${K}`]?: LmvzIconAttributes[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `prop:${K}`]?: LmvzIcon[K] } & OneOf<"icon", LmvzIcon["icon"], LmvzIconAttributes["icon"]>;
         "lmvz-input": Omit<LmvzInput, keyof LmvzInputAttributes> & { [K in keyof LmvzInput & keyof LmvzInputAttributes]?: LmvzInput[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `attr:${K}`]?: LmvzInputAttributes[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `prop:${K}`]?: LmvzInput[K] } & OneOf<"label", LmvzInput["label"], LmvzInputAttributes["label"]>;
         "lmvz-menuitem": Omit<LmvzMenuitem, keyof LmvzMenuitemAttributes> & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes]?: LmvzMenuitem[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `attr:${K}`]?: LmvzMenuitemAttributes[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `prop:${K}`]?: LmvzMenuitem[K] };
+        "lmvz-message": Omit<LmvzMessage, keyof LmvzMessageAttributes> & { [K in keyof LmvzMessage & keyof LmvzMessageAttributes]?: LmvzMessage[K] } & { [K in keyof LmvzMessage & keyof LmvzMessageAttributes as `attr:${K}`]?: LmvzMessageAttributes[K] } & { [K in keyof LmvzMessage & keyof LmvzMessageAttributes as `prop:${K}`]?: LmvzMessage[K] };
         "lmvz-modal": Omit<LmvzModal, keyof LmvzModalAttributes> & { [K in keyof LmvzModal & keyof LmvzModalAttributes]?: LmvzModal[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `attr:${K}`]?: LmvzModalAttributes[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `prop:${K}`]?: LmvzModal[K] };
         "lmvz-radio": Omit<LmvzRadio, keyof LmvzRadioAttributes> & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes]?: LmvzRadio[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `attr:${K}`]?: LmvzRadioAttributes[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `prop:${K}`]?: LmvzRadio[K] } & OneOf<"label", LmvzRadio["label"], LmvzRadioAttributes["label"]>;
         "lmvz-select": Omit<LmvzSelect, keyof LmvzSelectAttributes> & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes]?: LmvzSelect[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `attr:${K}`]?: LmvzSelectAttributes[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `prop:${K}`]?: LmvzSelect[K] } & OneOf<"label", LmvzSelect["label"], LmvzSelectAttributes["label"]>;
         "lmvz-snackbar": Omit<LmvzSnackbar, keyof LmvzSnackbarAttributes> & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes]?: LmvzSnackbar[K] } & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes as `attr:${K}`]?: LmvzSnackbarAttributes[K] } & { [K in keyof LmvzSnackbar & keyof LmvzSnackbarAttributes as `prop:${K}`]?: LmvzSnackbar[K] };
+        "lmvz-spinner": Omit<LmvzSpinner, keyof LmvzSpinnerAttributes> & { [K in keyof LmvzSpinner & keyof LmvzSpinnerAttributes]?: LmvzSpinner[K] } & { [K in keyof LmvzSpinner & keyof LmvzSpinnerAttributes as `attr:${K}`]?: LmvzSpinnerAttributes[K] } & { [K in keyof LmvzSpinner & keyof LmvzSpinnerAttributes as `prop:${K}`]?: LmvzSpinner[K] };
         "lmvz-tab": Omit<LmvzTab, keyof LmvzTabAttributes> & { [K in keyof LmvzTab & keyof LmvzTabAttributes]?: LmvzTab[K] } & { [K in keyof LmvzTab & keyof LmvzTabAttributes as `attr:${K}`]?: LmvzTabAttributes[K] } & { [K in keyof LmvzTab & keyof LmvzTabAttributes as `prop:${K}`]?: LmvzTab[K] } & OneOf<"value", LmvzTab["value"], LmvzTabAttributes["value"]>;
         "lmvz-tabs": Omit<LmvzTabs, keyof LmvzTabsAttributes> & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes]?: LmvzTabs[K] } & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes as `attr:${K}`]?: LmvzTabsAttributes[K] } & { [K in keyof LmvzTabs & keyof LmvzTabsAttributes as `prop:${K}`]?: LmvzTabs[K] } & OneOf<"value", LmvzTabs["value"], LmvzTabsAttributes["value"]>;
         "lmvz-toggle": Omit<LmvzToggle, keyof LmvzToggleAttributes> & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes]?: LmvzToggle[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `attr:${K}`]?: LmvzToggleAttributes[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `prop:${K}`]?: LmvzToggle[K] } & OneOf<"label", LmvzToggle["label"], LmvzToggleAttributes["label"]>;
@@ -1524,6 +1618,11 @@ export declare interface LmvzMenuitemCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzMenuitemElement;
 }
 
+export declare interface LmvzMessageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzMessageElement;
+}
+
 export declare interface LmvzModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLmvzModalElement;
@@ -1554,6 +1653,12 @@ export declare interface LmvzToggleCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzToggleElement;
 }
 
+export declare namespace Message {
+    export type Type = (typeof messageTypes)[number];
+}
+
+declare const messageTypes: readonly ["neutral", "warning"];
+
 declare const scaleValues: readonly ["small", "default", "large"];
 
 declare const sizes: readonly ["xs", "sm", "md", "lg"];

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from '@lmvz-ds/aria-validation';
 export type * from './components.d.ts';
-export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, textSizes } from './api/ds.constants';
+export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, messageTypes, textSizes } from './api/ds.constants';
 export type { LmvzDS, Typography } from './api';
+export * from './components/lmvz-message/public';
 export * from './components/lmvz-snackbar/public';
 export * from './utils/public';