@lmvz-ds/components 0.27.0 → 0.28.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-11T12:19:37",
+  "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"
         ],
@@ -1599,7 +1607,7 @@
       "filePath": "src/components/lmvz-input/lmvz-input.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-input",
-      "readme": "# lmvz-input\n\n\n",
+      "readme": "# lmvz-input\n\n## Size Variants\n\nThe `size` prop controls the input's height, padding, and associated typography. Set `size` to one of `'sm'`, `'md'`, or `'lg'`. The default is `'md'`.\n\n| Size | Height | Notes |\n|------|--------|-------|\n| `sm` | ~36px | Compact variant with reduced padding |\n| `md` | ~44px | Default; balanced spacing and readability |\n| `lg` | ~48px | Expanded variant with generous padding |\n\nHeights are fluid and derive from design tokens; exact pixel values depend on user font size settings.\n",
       "docs": "Input component with floating label, (form) validation, and slotted content support.",
       "docsTags": [
         {
@@ -5276,6 +5284,51 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "size",
+          "type": "\"lg\" | \"md\" | \"sm\"",
+          "complexType": {
+            "original": "Input.Size",
+            "resolved": "\"lg\" | \"md\" | \"sm\"",
+            "references": {
+              "Input": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Input",
+                "referenceLocation": "Input"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Size variant of the input",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'md'"
+            }
+          ],
+          "default": "'md'",
+          "values": [
+            {
+              "value": "lg",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "sm",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "spellcheck",
           "type": "boolean | undefined",
@@ -5732,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",
@@ -6773,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",
@@ -7545,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.0",
+  "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

@@ -3,6 +3,7 @@ export declare const scaleValues: readonly ["small", "default", "large"];
 export declare const sizes: readonly ["xs", "sm", "md", "lg"];
 export declare const textSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const inputTypes: readonly ["text", "email", "password", "tel", "url", "search", "number"];
+export declare const inputSizes: readonly ["sm", "md", "lg"];
 export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 export declare const iconWeights: readonly ["thin", "medium", "bold"];
 export declare const chipTypes: readonly ["active", "warning", "success", "error", "neutral"];
@@ -28,10 +29,15 @@ export declare namespace Icon {
 }
 export declare namespace Input {
     type Type = (typeof inputTypes)[number];
+    type Size = (typeof inputSizes)[number];
     type Autocomplete = HTMLInputElement['autocomplete'];
     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-input/lmvz-input.d.ts

@@ -39,6 +39,7 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     max?: number | string;
     step?: number | string;
     form?: string;
+    size: Input.Size;
     get error(): boolean;
     set error(value: boolean);
     setValue(newValue: string | undefined): Promise<void>;

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;
+}