@lmvz-ds/components 0.17.3 → 0.18.1

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-22T16:38:15",
+  "timestamp": "2026-05-13T09:16:48",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -7,7 +7,7 @@
   },
   "components": [
     {
-      "filePath": "src/integration/header-integration.tsx",
+      "filePath": "src/integration/header-integration/header-integration.tsx",
       "encapsulation": "shadow",
       "tag": "header-integration",
       "readme": "# header-integration\n\n\n",
@@ -145,8 +145,8 @@
             "references": {
               "FormRef": {
                 "location": "import",
-                "path": "../../utils/component",
-                "id": "src/utils/component.ts::FormRef",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::FormRef",
                 "referenceLocation": "FormRef"
               }
             }
@@ -182,7 +182,7 @@
               "Button": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Button",
+                "id": "src/api/index.d.ts::Button",
                 "referenceLocation": "Button"
               }
             }
@@ -294,7 +294,7 @@
               "Button": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Button",
+                "id": "src/api/index.d.ts::Button",
                 "referenceLocation": "Button"
               }
             }
@@ -669,7 +669,7 @@
       "encapsulation": "scoped",
       "tag": "lmvz-icon",
       "readme": "# lmvz-icon\n\n\n",
-      "docs": "`lmvz-icon` is a web component that lazy-loads and displays an SVG icon from our predefined icon set.\nIt uses an IntersectionObserver to defer loading the icon until it becomes visible in the viewport. Once loaded, icon data is cached across instances.",
+      "docs": "`lmvz-icon` is a web component that lazy-loads and displays an SVG icon from the given icon set.\nIt requires a provider to be registered in the application (once), which will supply the icon data based on the `icon` prop, for its `iconset`.\n\nLoading is deferred, using an IntersectionObserver, until the instance becomes visible in the viewport.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -701,284 +701,60 @@
         },
         {
           "name": "icon",
-          "type": "\"Logo\" | \"actions\" | \"adduser\" | \"alert\" | \"apple\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"book\" | \"bookmark\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close-l\" | \"close-sm\" | \"cog\" | \"computer\" | \"dashboard\" | \"delete\" | \"download\" | \"edit\" | \"external\" | \"facebook\" | \"favorite\" | \"filter\" | \"group\" | \"hide\" | \"home\" | \"info\" | \"instagram\" | \"letter\" | \"linkedin\" | \"logout\" | \"map\" | \"minus\" | \"navigation\" | \"plus\" | \"qr-scan\" | \"question\" | \"reader\" | \"reset\" | \"school\" | \"search\" | \"send\" | \"settings\" | \"share\" | \"shopping-cart\" | \"show\" | \"snapchat\" | \"sort\" | \"speech-bubble\" | \"star\" | \"student\" | \"upload\" | \"user\" | \"warn-circle\" | \"warn-triangle\" | \"whatsapp\" | \"world\" | \"x\" | \"youtube\"",
+          "type": "string | string & Brand<\"SVG\">",
           "complexType": {
-            "original": "Icon.IconName",
-            "resolved": "\"Logo\" | \"actions\" | \"adduser\" | \"alert\" | \"apple\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"book\" | \"bookmark\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close-l\" | \"close-sm\" | \"cog\" | \"computer\" | \"dashboard\" | \"delete\" | \"download\" | \"edit\" | \"external\" | \"facebook\" | \"favorite\" | \"filter\" | \"group\" | \"hide\" | \"home\" | \"info\" | \"instagram\" | \"letter\" | \"linkedin\" | \"logout\" | \"map\" | \"minus\" | \"navigation\" | \"plus\" | \"qr-scan\" | \"question\" | \"reader\" | \"reset\" | \"school\" | \"search\" | \"send\" | \"settings\" | \"share\" | \"shopping-cart\" | \"show\" | \"snapchat\" | \"sort\" | \"speech-bubble\" | \"star\" | \"student\" | \"upload\" | \"user\" | \"warn-circle\" | \"warn-triangle\" | \"whatsapp\" | \"world\" | \"x\" | \"youtube\"",
+            "original": "SVGString | string",
+            "resolved": "string | string & Brand<\"SVG\">",
             "references": {
-              "Icon": {
+              "SVGString": {
                 "location": "import",
-                "path": "../../api",
-                "id": "src/api/index.ts::Icon",
-                "referenceLocation": "Icon"
+                "path": "@lmvz-ds/lib-ts/validation/SVGString.d.ts",
+                "id": "../../lib/ts/dist/validation/SVGString.d.ts::SVGString",
+                "referenceLocation": "SVGString"
               }
             }
           },
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "The name of the icon to display (required).",
+          "docs": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the (default) iconset.",
           "docsTags": [],
           "values": [
             {
-              "value": "Logo",
-              "type": "string"
-            },
-            {
-              "value": "actions",
-              "type": "string"
-            },
-            {
-              "value": "adduser",
-              "type": "string"
-            },
-            {
-              "value": "alert",
-              "type": "string"
-            },
-            {
-              "value": "apple",
-              "type": "string"
-            },
-            {
-              "value": "arrow-down",
-              "type": "string"
-            },
-            {
-              "value": "arrow-left",
-              "type": "string"
-            },
-            {
-              "value": "arrow-right",
-              "type": "string"
-            },
-            {
-              "value": "arrow-up",
-              "type": "string"
-            },
-            {
-              "value": "book",
-              "type": "string"
-            },
-            {
-              "value": "bookmark",
-              "type": "string"
-            },
-            {
-              "value": "checkmark",
-              "type": "string"
-            },
-            {
-              "value": "chevron-down",
-              "type": "string"
-            },
-            {
-              "value": "chevron-left",
-              "type": "string"
-            },
-            {
-              "value": "chevron-right",
-              "type": "string"
-            },
-            {
-              "value": "chevron-up",
-              "type": "string"
-            },
-            {
-              "value": "close-l",
-              "type": "string"
-            },
-            {
-              "value": "close-sm",
-              "type": "string"
-            },
-            {
-              "value": "cog",
-              "type": "string"
-            },
-            {
-              "value": "computer",
-              "type": "string"
-            },
-            {
-              "value": "dashboard",
-              "type": "string"
-            },
-            {
-              "value": "delete",
-              "type": "string"
-            },
-            {
-              "value": "download",
-              "type": "string"
-            },
-            {
-              "value": "edit",
-              "type": "string"
-            },
-            {
-              "value": "external",
-              "type": "string"
-            },
-            {
-              "value": "facebook",
-              "type": "string"
-            },
-            {
-              "value": "favorite",
-              "type": "string"
-            },
-            {
-              "value": "filter",
-              "type": "string"
-            },
-            {
-              "value": "group",
-              "type": "string"
-            },
-            {
-              "value": "hide",
-              "type": "string"
-            },
-            {
-              "value": "home",
-              "type": "string"
-            },
-            {
-              "value": "info",
-              "type": "string"
-            },
-            {
-              "value": "instagram",
-              "type": "string"
-            },
-            {
-              "value": "letter",
-              "type": "string"
-            },
-            {
-              "value": "linkedin",
-              "type": "string"
-            },
-            {
-              "value": "logout",
-              "type": "string"
-            },
-            {
-              "value": "map",
-              "type": "string"
-            },
-            {
-              "value": "minus",
-              "type": "string"
-            },
-            {
-              "value": "navigation",
-              "type": "string"
-            },
-            {
-              "value": "plus",
-              "type": "string"
-            },
-            {
-              "value": "qr-scan",
-              "type": "string"
-            },
-            {
-              "value": "question",
-              "type": "string"
-            },
-            {
-              "value": "reader",
-              "type": "string"
-            },
-            {
-              "value": "reset",
-              "type": "string"
-            },
-            {
-              "value": "school",
-              "type": "string"
-            },
-            {
-              "value": "search",
-              "type": "string"
-            },
-            {
-              "value": "send",
-              "type": "string"
-            },
-            {
-              "value": "settings",
-              "type": "string"
-            },
-            {
-              "value": "share",
-              "type": "string"
-            },
-            {
-              "value": "shopping-cart",
-              "type": "string"
-            },
-            {
-              "value": "show",
-              "type": "string"
-            },
-            {
-              "value": "snapchat",
-              "type": "string"
-            },
-            {
-              "value": "sort",
               "type": "string"
             },
             {
-              "value": "speech-bubble",
-              "type": "string"
-            },
-            {
-              "value": "star",
-              "type": "string"
-            },
-            {
-              "value": "student",
-              "type": "string"
-            },
-            {
-              "value": "upload",
-              "type": "string"
-            },
-            {
-              "value": "user",
-              "type": "string"
-            },
-            {
-              "value": "warn-circle",
-              "type": "string"
-            },
-            {
-              "value": "warn-triangle",
-              "type": "string"
-            },
-            {
-              "value": "whatsapp",
-              "type": "string"
-            },
-            {
-              "value": "world",
-              "type": "string"
-            },
+              "type": "string & Brand<\"SVG\">"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "iconset",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "iconset",
+          "reflectToAttr": true,
+          "docs": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.",
+          "docsTags": [],
+          "values": [
             {
-              "value": "x",
               "type": "string"
             },
             {
-              "value": "youtube",
-              "type": "string"
+              "type": "undefined"
             }
           ],
-          "optional": false,
-          "required": true,
+          "optional": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
@@ -992,7 +768,7 @@
               "Icon": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Icon",
+                "id": "src/api/index.d.ts::Icon",
                 "referenceLocation": "Icon"
               }
             }
@@ -1048,7 +824,7 @@
               "Icon": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Icon",
+                "id": "src/api/index.d.ts::Icon",
                 "referenceLocation": "Icon"
               }
             }
@@ -1125,11 +901,11 @@
         },
         {
           "name": "slot",
-          "text": "before-input - Content to the left of the input. If interactive (e.g., clear button), use an lmvz-button element.\nExample: <lmvz-button slot=\"before-input\" aria-label=\"Clear input\" tabindex=\"0\"><lmvz-icon icon=\"close-sm\"></lmvz-icon></lmvz-button>"
+          "text": "before-input - Content to the left of the input. If interactive (e.g., clear button), use an lmvz-button element.\nExample: <lmvz-button slot=\"before-input\" aria-label=\"Clear input\" tabindex=\"0\"><lmvz-icon iconset=\"lmvz\" icon=\"close-sm\"></lmvz-icon></lmvz-button>"
         },
         {
           "name": "slot",
-          "text": "after-input - Content to the right of the input. If interactive (e.g., password toggle), use an lmvz-button element.\nExample: <lmvz-button slot=\"after-input\" aria-label=\"Toggle password visibility\" tabindex=\"0\"><lmvz-icon icon=\"eye\"></lmvz-icon></lmvz-button>"
+          "text": "after-input - Content to the right of the input. If interactive (e.g., password toggle), use an lmvz-button element.\nExample: <lmvz-button slot=\"after-input\" aria-label=\"Toggle password visibility\" tabindex=\"0\"><lmvz-icon iconset=\"lmvz\" icon=\"show\"></lmvz-icon></lmvz-button>"
         }
       ],
       "usage": {},
@@ -1144,7 +920,7 @@
               "Input": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Input",
+                "id": "src/api/index.d.ts::Input",
                 "referenceLocation": "Input"
               }
             }
@@ -1203,7 +979,7 @@
               "Input": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Input",
+                "id": "src/api/index.d.ts::Input",
                 "referenceLocation": "Input"
               }
             }
@@ -4468,7 +4244,7 @@
               "Input": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Input",
+                "id": "src/api/index.d.ts::Input",
                 "referenceLocation": "Input"
               }
             }
@@ -4859,7 +4635,7 @@
               "Input": {
                 "location": "import",
                 "path": "../../api",
-                "id": "src/api/index.ts::Input",
+                "id": "src/api/index.d.ts::Input",
                 "referenceLocation": "Input"
               }
             }
@@ -5130,11 +4906,11 @@
       "slots": [
         {
           "name": "after-input",
-          "docs": "Content to the right of the input. If interactive (e.g., password toggle), use an lmvz-button element.\nExample: <lmvz-button slot=\"after-input\" aria-label=\"Toggle password visibility\" tabindex=\"0\"><lmvz-icon icon=\"eye\"></lmvz-icon></lmvz-button>"
+          "docs": "Content to the right of the input. If interactive (e.g., password toggle), use an lmvz-button element.\nExample: <lmvz-button slot=\"after-input\" aria-label=\"Toggle password visibility\" tabindex=\"0\"><lmvz-icon iconset=\"lmvz\" icon=\"show\"></lmvz-icon></lmvz-button>"
         },
         {
           "name": "before-input",
-          "docs": "Content to the left of the input. If interactive (e.g., clear button), use an lmvz-button element.\nExample: <lmvz-button slot=\"before-input\" aria-label=\"Clear input\" tabindex=\"0\"><lmvz-icon icon=\"close-sm\"></lmvz-icon></lmvz-button>"
+          "docs": "Content to the left of the input. If interactive (e.g., clear button), use an lmvz-button element.\nExample: <lmvz-button slot=\"before-input\" aria-label=\"Clear input\" tabindex=\"0\"><lmvz-icon iconset=\"lmvz\" icon=\"close-sm\"></lmvz-icon></lmvz-button>"
         }
       ],
       "parts": [],
@@ -5460,25 +5236,30 @@
     }
   ],
   "typeLibrary": {
-    "src/api/index.ts::Button": {
+    "src/api/index.d.ts::Button": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.d.ts"
+    },
+    "src/api/index.d.ts::FormRef": {
       "declaration": "any",
       "docstring": "",
-      "path": "src/api/index.ts"
+      "path": "src/api/index.d.ts"
     },
-    "src/utils/component.ts::FormRef": {
-      "declaration": "export type FormRef = string | HTMLFormElement | undefined;",
+    "../../lib/ts/dist/validation/SVGString.d.ts::SVGString": {
+      "declaration": "export type SVGString = string & Brand.Brand<'SVG'>;",
       "docstring": "",
-      "path": "src/utils/component.ts"
+      "path": "../../lib/ts/dist/validation/SVGString.d.ts"
     },
-    "src/api/index.ts::Icon": {
+    "src/api/index.d.ts::Icon": {
       "declaration": "any",
       "docstring": "",
-      "path": "src/api/index.ts"
+      "path": "src/api/index.d.ts"
     },
-    "src/api/index.ts::Input": {
+    "src/api/index.d.ts::Input": {
       "declaration": "any",
       "docstring": "",
-      "path": "src/api/index.ts"
+      "path": "src/api/index.d.ts"
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.17.3",
+  "version": "0.18.1",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -81,7 +81,9 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "effect": "^3.21.1",
+    "effect": "^3.21.1"
+  },
+  "optionalDependencies": {
     "@lmvz-ds/aria-validation": "~0.16.1"
   },
   "files": [

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

@@ -5,4 +5,25 @@ 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 iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 export declare const iconWeights: readonly ["thin", "medium", "bold", "filled"];
-export declare const iconNames: readonly ["Logo", "actions", "adduser", "alert", "apple", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "book", "bookmark", "checkmark", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "close-l", "close-sm", "cog", "computer", "dashboard", "delete", "download", "edit", "external", "facebook", "favorite", "filter", "group", "hide", "home", "info", "instagram", "letter", "linkedin", "logout", "map", "minus", "navigation", "plus", "qr-scan", "question", "reader", "reset", "school", "search", "send", "settings", "share", "shopping-cart", "show", "snapchat", "sort", "speech-bubble", "star", "student", "upload", "user", "warn-circle", "warn-triangle", "whatsapp", "world", "x", "youtube"];
+export declare namespace LmvzDS {
+    type Variant = (typeof variants)[number];
+    type Size = (typeof sizes)[number];
+}
+export declare namespace Typography {
+    type Size = (typeof textSizes)[number];
+}
+export declare namespace Button {
+    type Scale = (typeof scaleValues)[number];
+    type Variant = LmvzDS.Variant;
+}
+export declare namespace Icon {
+    type Size = (typeof iconSizes)[number];
+    type IconWeight = (typeof iconWeights)[number];
+}
+export declare namespace Input {
+    type Type = (typeof inputTypes)[number];
+    type Autocomplete = HTMLInputElement['autocomplete'];
+    type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+}
+//# sourceMappingURL=ds.constants.d.ts.map

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

@@ -1,39 +1,4 @@
-import { iconNames, iconSizes, iconWeights, inputTypes, scaleValues, variants, type sizes, type textSizes } from './ds.constants';
+export type * from './ds.constants';
 
-export namespace LmvzDS {
-  export type Variant = (typeof variants)[number];
-  export type Size = (typeof sizes)[number];
-}
-
-export namespace Typography {
-  export type Size = (typeof textSizes)[number];
-}
-
-export namespace Button {
-  export type Scale = (typeof scaleValues)[number];
-  export type Variant = LmvzDS.Variant;
-}
-
-export namespace Icon {
-  export type Size = (typeof iconSizes)[number];
-
-  export type IconWeight = (typeof iconWeights)[number];
-
-  export type IconName = (typeof iconNames)[number];
-}
-
-export namespace Input {
-  export type Type = (typeof inputTypes)[number];
-
-  export type Autocomplete = HTMLInputElement['autocomplete'];
-
-  /**
-   * Inputmode attribute for mobile keyboards
-   */
-  export type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-
-  /**
-   * Autocapitalize attribute for mobile keyboards
-   */
-  export type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-}
+export type Attributes = { [key: string]: unknown };
+export type FormRef = string | HTMLFormElement | undefined;

package/types/api/index.d.ts

@@ -1,3 +1,2 @@
 export type * from './aria-types';
-export * from './ds.constants';
 export type * from './ds.types';

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

@@ -4,3 +4,4 @@ export declare class LmvzAction {
     private _onClick;
     render(): any;
 }
+//# sourceMappingURL=lmvz-action.d.ts.map

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

@@ -1,8 +1,7 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
-import type { Button } from '../../api';
+import type { Button, FormRef } from '../../api';
 import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
 import { type ElementActivationHost } from '../../utils/aria/element-activation-controller';
-import { type FormRef } from '../../utils/component';
 import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
 export declare class LmvzButton extends ReactiveControllerHost implements AriaValidationHost, ElementActivationHost {
     el: HTMLLmvzButtonElement;
@@ -24,3 +23,4 @@ export declare class LmvzButton extends ReactiveControllerHost implements AriaVa
     private handleClick;
     render(): any;
 }
+//# sourceMappingURL=lmvz-button.d.ts.map

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

@@ -10,3 +10,4 @@ export declare class LmvzCard {
     private _onOverflowClick;
     render(): any;
 }
+//# sourceMappingURL=lmvz-card.d.ts.map

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

@@ -2,3 +2,4 @@ export declare class LmvzChip {
     text: string;
     render(): any;
 }
+//# sourceMappingURL=lmvz-chip.d.ts.map

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

@@ -23,3 +23,4 @@ export declare class LmvzHeader extends ReactiveControllerHost implements AriaVa
     private delegateFocus;
     render(): any;
 }
+//# sourceMappingURL=lmvz-header.d.ts.map

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

@@ -1,3 +1,4 @@
+import type { SVGString } from '@lmvz-ds/lib-ts/validation/SVGString.d.ts';
 import type { Icon } from '../../api';
 import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
 import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
@@ -6,9 +7,10 @@ export declare class LmvzIcon extends ReactiveControllerHost implements AriaVali
     private readonly ariaValidationController;
     el: HTMLElement;
     validationEl: HTMLElement | undefined;
-    icon: Icon.IconName;
+    icon: SVGString | string;
     weight?: Icon.IconWeight;
     size?: Icon.Size;
+    iconset?: string;
     private iconData?;
     private visible;
     ariaLabel?: string;
@@ -21,3 +23,4 @@ export declare class LmvzIcon extends ReactiveControllerHost implements AriaVali
     render(): any;
     private waitUntilVisible;
 }
+//# sourceMappingURL=lmvz-icon.d.ts.map

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

@@ -62,3 +62,4 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     private updateNativeError;
     render(): any;
 }
+//# sourceMappingURL=lmvz-input.d.ts.map