@lmvz-ds/components 0.18.2 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lmvz-ds/components
 
+## 0.20.0
+
+### Minor Changes
+
+- 9f1fe1e: Checkbox Komponente hinzugefügt
+
+### Patch Changes
+
+- 8dac215: Farbfehler in <lmvz-menuitem> korrigiert (Regression)
+
+## 0.19.0
+
+### Minor Changes
+
+- a71b037: Chip Komponente hinzugefügt
+
 ## 0.18.2
 
 ### Patch Changes

package/README.md

@@ -1,43 +1,60 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
-
-Stencil is a compiler for building web apps using Web Components.
-
 # LMVZ Component Library
 
-This is the component library of the LMVZ Design System
-
-## About
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMzczLjljMCwzNy42LTU1LjEsNjguNi05Mi43LDY4LjZIMTgwLjRjLTM3LjksMC05Mi43LTMwLjctOTIuNy02OC42di0zLjZoMzM2LjlWMzczLjl6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywyOTIuMUgxODAuNGMtMzcuNiwwLTkyLjctMzEtOTIuNy02OC42di0zLjZIMzMyYzM3LjYsMCw5Mi43LDMxLDkyLjcsNjguNlYyOTIuMXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDE0MS43SDg3Ljd2LTMuNmMwLTM3LjYsNTQuOC02OC42LDkyLjctNjguNkgzMzJjMzcuOSwwLDkyLjcsMzAuNyw5Mi43LDY4LjZWMTQxLjd6Ii8+Cjwvc3ZnPgo%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-This package uses **Stencil** to create web components—for browser-native usage—and framework-specific wrapper utils for angular and react (which are wrapped using their dedicated sibling packages).
-It also uses **Effect** (aka. effect-ts) for improved type-safety error handling
+Web components for the LMVZ Design System.
 
-## General Guidelines for Consuming This Package (in your project)
+## About
 
-Always consider the Integration chapter in the Design Guide. In the context of a UI framework, consider using the specific wrapper packages: `@lmvz-ds/angular`, `@lmvz-ds/react`, `@lmvz-ds/vue`.
+This package uses **Stencil** to create web components for browser-native usage and to generate integration artifacts consumed by sibling framework packages.
 
-## NPM Integration
+Please also read the Integration chapter of the Design Guide.
 
-### Installation
+## Installation
 
 ```bash
 npm i @lmvz-ds/components
 ```
 
+> [!TIP]
+> If you are building an Angular application, prefer the `@lmvz-ds/angular` wrapper package.
+
 > [!TIP]
 > Our @lmvz-ds/aria-validation sibling is only used for YOUR development mode, and thus, optional.
 
 ## Usage
 
-In a web app, import components directly (`import LmvzCard from '.../components/lmvz-card.js'`) or the loader (e.g., `import { defineCustomElements } from '.../loader';`) and call `defineCustomElements(window)` to register all components globally.
-Use the CDN version (cdn.js) for direct browser inclusion via <script> tags.
-The loader is essential when integrating Stencil components into non-Stencil projects (React, Angular, plain HTML) to ensure custom elements are defined and polyfills loaded.
+Import individual components when you only need a subset:
+
+```ts
+import '@lmvz-ds/components/lmvz-button';
+import '@lmvz-ds/components/lmvz-icon';
+```
+
+Register all components globally via the loader when that is a better fit for your app shell:
+
+```ts
+import { defineCustomElements } from '@lmvz-ds/components/loader';
+
+defineCustomElements(window);
+```
+
+If your app has no own build/bundling process, directly import from the CDN (unpkg.com) using `<script type="module" href="[cdnurl]">`.
+
+The package also exposes a /hydrate entry for server-side rendering workflows.
+
+### Icons
+
+The `<lmvz-icon>` component requires an icon provider to be registered before use. See [@lmvz-ds/icons](https://www.npmjs.com/package/@lmvz-ds/icons) for setup instructions and available provider modes.
 
 ### Runtime ARIA Validation (Opt-in)
 
-ARIA validation is disabled by default and can be enabled on demand with a separate runtime import:
+ARIA validation is disabled by default and can be enabled on demand for development-time accessibility checks:
 
 ```ts
-import '@lmvz-ds/components/ariaValidation';
+import { enableAriaValidation } from '@lmvz-ds/components';
+
+enableAriaValidation();
 ```
 
 This import enables validation globally for all LMVZ components, independent of integration mode.
@@ -45,25 +62,25 @@ This import enables validation globally for all LMVZ components, independent of
 To disable it again at runtime:
 
 ```ts
-import { disableAriaValidation } from '@lmvz-ds/components/ariaValidation';
+import { disableAriaValidation } from '@lmvz-ds/components';
 
 disableAriaValidation();
 ```
 
-### Components
-
-Components are built in standalone mode, using [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements). This way, you can import the components individually, wherever they are needed.
+### Example
 
-For example, given you'd like to use `<my-component />` as part of your application, you can import the component directly via:
+Import and register the component module before using its custom element:
 
 ```tsx
-import '@lmvz-ds/components/my-component';
+import { defineCustomElement as defineButtonElement } '@lmvz-ds/components/lmvz-button';
+
+defineButtonElement();
 
 function App() {
   return (
     <>
       <div>
-        <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+        <lmvz-button variant="primary"></lmvz-button>
       </div>
     </>
   );
@@ -72,81 +89,9 @@ function App() {
 export default App;
 ```
 
-⚠️ The components' bundled styles will not affect native HTML elements, so you still need to import style packages you want to use globally.
-
-## Making changes to this package
-
-### Getting Started
-
-```bash
-npm install
-```
-
-### Workflow
-
-See the parent project's readme for the overarching process' description.
-
-### Guidelines
-
-- Components must each be provided as stand-alone bundles.
-- Components must bring their own, ds-aligned, default styles. This increases flexibility (as components are usable stand-alone) and is achieved by build-time injection of defaults (based on base- and light-theme-variables). There is no need for importing any variables definitions. Instead, add base variables to the plugin config's list (`stencil.base.config.ts`).
-  - Font file contents are exempt from bundling, to allow for browser-caching!
-- To prevent styles from leaking out of your Components (into the global scope), wrap your own styles and `@import`s in `:host`.
-- Components depending on Fragments must import them into their :host selector, for proper encapsulation.
-  - This use of CSS' @import syntax is invalid, but properly handled by postcss.
-  - Consider using custom-property abstractions instead of importing whole fragments!
-
-
-### Configuration
-
-Different Stencil configs are necessary, since we need the following constellations (which are not possible with a single config):
-
-- local Stencil dev-server: classic dev build
-- Storybook integration: prod build + source maps (dev build does not generate source files in dist/)
-- release build: prod build without source maps
-
-package.json exports should be generated along with the Stencil build (for new components).
-
-### Development
-
-Use the `pnpm run start:dev` script to start Stencil's dev server.  
-(`start` will be called from the Storybook sibling package and will only run a (watching) production build).  
-
-### Building
-
-To build the components (and styles) for production, run the build script. This will also sync changes to the wrapper projects.
-
-```bash
-pnpm run build
-```
-
-### Creating New Components
-
-Always use the `lmvz-` prefix when creating new components!
-
-```bash
-pnpm run @stencil/core generate lmvz-[component name]
-```
-
-### Testing
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-#### Integration Testing
-
-Since components can be integrated in various ways, always test integrations:
-
-- Stencil dev mode and preview (see package scripts).
-- With the Storybook package.
-- Angular, React, ... wrappers
+LMVZ component styles do not style native HTML elements outside the components. Import a theme, and any additional global style bundles you need, from `@lmvz-ds/styles` separately.
 
-#### E2E
 
-TODOs
+## Contributing
 
-- Current Playwright integration is broken or will break Jest integration.  
-- Vitest-Browser + Stencil is bleeding edge and needs eval.
+Contributor onboarding for local development, builds, testing, and authoring guidelines is in `DEVELOPMENT.md`.

package/assets/icons/checkmark.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M3.75 12.5625L8.83079 17.625L20.4375 6.375" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/cjs/{aria-loader-CfFuAbJn.js → aria-loader-Cec1zR2g.js}

@@ -43,7 +43,7 @@ async function fetchRuntime() {
     if (state.runtime)
         return state.runtime;
     if (!state.loadPromise) {
-        state.loadPromise = Promise.resolve().then(function () { return require('./index--7IqZZqn.js'); }).catch(() => null);
+        state.loadPromise = Promise.resolve().then(function () { return require('./index-3g9Z9sfF.js'); }).catch(() => null);
     }
     const runtime = await state.loadPromise;
     if (runtime) {

package/cjs/ds.constants-DSnxZ3ia.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const sizes = ['xs', 'sm', 'md', 'lg'];
+const textSizes = [...sizes, 'xl'];
+const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
+const iconSizes = [...sizes, 'inherit'];
+const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
+const chipSizes = ['default', 'small'];
+
+exports.chipSizes = chipSizes;
+exports.chipTypes = chipTypes;
+exports.iconSizes = iconSizes;
+exports.iconWeights = iconWeights;
+exports.inputTypes = inputTypes;
+exports.textSizes = textSizes;

package/cjs/icons-BQASWgk-.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var svg = require('./svg-BMBduILB.js');
+
+const IconProviderRegistryKey = Symbol.for('LMVZ__iconProviderRegistry');
+const inMemoryRegistry = {};
+function getRegistry() {
+    if (typeof window === 'undefined') {
+        return inMemoryRegistry;
+    }
+    return window[IconProviderRegistryKey] ?? (window[IconProviderRegistryKey] = {});
+}
+function registerIconProvider(id, provider) {
+    const registry = getRegistry();
+    const providerName = id;
+    if (Object.prototype.hasOwnProperty.call(registry, providerName)) {
+        console.warn(`Icon provider with name "${providerName}" is already registered. Overwriting existing provider.`);
+    }
+    registry[providerName] = provider;
+}
+function getRegisteredIconProvider(id) {
+    const registry = getRegistry();
+    if (id) {
+        return registry[id];
+    }
+    const providerNames = Object.keys(registry);
+    if (providerNames.length === 0) {
+        return undefined;
+    }
+    if (providerNames.length > 1) {
+        console.warn(`Multiple icon providers registered (${providerNames.join(', ')}). Using the first one: "${providerNames[0]}".`);
+    }
+    const firstProviderName = providerNames[0];
+    if (!firstProviderName) {
+        return undefined;
+    }
+    return registry[firstProviderName];
+}
+
+async function resolveIconSvg(options) {
+    const { icon, iconset } = options;
+    const iconSvg = await (async () => {
+        const provider = getRegisteredIconProvider(iconset);
+        if (!provider) {
+            console.warn(`No icon provider registered. Unable to resolve icon "${icon}"${iconset ? ` from set "${iconset}"` : ''}. Using default icon.`);
+            return;
+        }
+        try {
+            const resolved = await Promise.resolve(provider.resolve(icon));
+            if (!resolved?.svg) {
+                console.warn(`Icon "${icon}"${iconset ? ` from set "${iconset}"` : ''} not found in provider. Using default icon.`);
+                return;
+            }
+            const validated = svg.toValidSvgStringWithFallback(resolved.svg);
+            if (validated) {
+                return validated;
+            }
+        }
+        catch (error) {
+            console.error(`Error resolving icon "${icon}" with provider:`, error);
+            return;
+        }
+        return;
+    })();
+    if (iconSvg)
+        return iconSvg;
+    console.error(`Icon "${icon}" not found${iconset ? ` in set "${iconset}"` : ''}. Using default icon.`);
+    return svg.emptyDefaultSvg();
+}
+function typedIconFromSet(iconset, icon) {
+    return {
+        iconset,
+        icon,
+    };
+}
+
+exports.getRegisteredIconProvider = getRegisteredIconProvider;
+exports.registerIconProvider = registerIconProvider;
+exports.resolveIconSvg = resolveIconSvg;
+exports.typedIconFromSet = typedIconFromSet;