@lmvz-ds/components 0.14.1 → 0.16.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lmvz-ds/components",
   "private": false,
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "volta": {
@@ -92,6 +92,10 @@
     "./lmvz-menuitem": {
       "import": "./dist/components/lmvz-menuitem.js",
       "types": "./dist/components/lmvz-menuitem.d.ts"
+    },
+    "./lmvz-select": {
+      "import": "./dist/components/lmvz-select.js",
+      "types": "./dist/components/lmvz-select.d.ts"
     }
   },
   "main": "dist/index.cjs.js",
@@ -104,86 +108,46 @@
     "type": "git",
     "url": "https://bitbucket.org/lmvz/lmvz-ds"
   },
-  "scripts": {
-    "start": "npm run start:integration",
-    "start:integration": "npm run build:integration -- --watch",
-    "start:dev": "stencil build --watch --dev --serve --config stencil.config.dev.ts",
-    "build": "npm run build:components",
-    "build:components": "stencil build --docs --prod --config stencil.config.prod.ts",
-    "build:debug": "node --inspect-brk ../../node_modules/.bin/stencil build --debug --docs --config ./stencil.config.dev.ts",
-    "build:integration": "stencil build --config stencil.config.integration.ts",
-    "test": "stencil-test",
-    "test:watch": "stencil-test --watch",
-    "lint": "concurrently 'eslint \"src/**\"' 'stylelint \"src/**/*.css\" --config ./stylelint.config.mjs'",
-    "generate": "stencil generate",
-    "update": "npx npm-check-updates -u"
-  },
-  "nx": {
-    "targets": {
-      "start:integration": {
-        "dependsOn": [
-          "^build"
-        ]
-      },
-      "start:dev": {
-        "dependsOn": [
-          "^build"
-        ]
-      },
-      "build:integration": {
-        "dependsOn": [
-          "^build"
-        ]
-      },
-      "build:components": {
-        "cache": true,
-        "dependsOn": [
-          "^build:components"
-        ],
-        "outputs": [
-          "{projectRoot}/src/components.d.ts",
-          "{projectRoot}/.stencil",
-          "{projectRoot}/dist",
-          "{projectRoot}/hydrate",
-          "{projectRoot}/loader",
-          "{projectRoot}/assets"
-        ]
-      },
-      "lint": {
-        "dependsOn": [
-          "^build"
-        ]
-      }
-    }
-  },
   "dependencies": {
-    "@lmvz-ds/aria-validation": "^0.14.1",
     "classnames": "^2.5.1",
-    "effect": "3.19.14"
+    "effect": "^3.21.0",
+    "@lmvz-ds/aria-validation": "~0.16.0"
   },
   "devDependencies": {
-    "@lmvz-ds/design-tokens": "^0.14.1",
-    "@lmvz-ds/lib-styles": "^0.14.1",
-    "@lmvz-ds/styles": "^0.14.1",
-    "@stencil-community/postcss": "^2.2.0",
+    "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "1.3.0",
-    "@stencil/core": "4.43.2",
-    "@stencil/react-output-target": "^1.2.0",
-    "@stencil/utils": "0.0.5",
-    "@stencil/vitest": "^1.7.0",
-    "@stencil/vue-output-target": "^0.11.8",
+    "@stencil/core": "^4.43.3",
+    "@stencil/react-output-target": "1.4.2",
+    "@stencil/vitest": "1.8.3",
+    "@stencil/vue-output-target": "0.13.1",
     "@types/postcss-import": "^14.0.3",
     "concurrently": "^9.2.1",
     "happy-dom": "^20.8.4",
+    "postcss-auto-var-fallback": "1.1.0",
     "postcss-import": "^16.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "stylelint": "^17.0.0",
-    "stylelint-config-standard": "^40.0.0",
-    "stylelint-value-no-unknown-custom-properties": "file:../../stylelint-value-no-unknown-custom-properties",
-    "ts-deepmerge": "^7.0.3",
-    "tsx": "^4.21.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.1.0"
+    "stylelint": "^16.0.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-value-no-unknown-custom-properties": "6.1.1",
+    "tslib": "^2.8.1",
+    "tsx": "^4.8.1",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.0",
+    "@lmvz-ds/lib-config": "0.15.2",
+    "@lmvz-ds/lib-styles": "~0.15.2",
+    "@lmvz-ds/styles": "~0.16.0",
+    "@lmvz-ds/design-tokens": "~0.15.2"
   },
-  "gitHead": "12fadab9cddee154076ca7760e3008c230ac7bd4"
-}
+  "gitHead": "aaec2215b0239d6fa4a5876af444e0b7abba2c7d",
+  "scripts": {
+    "start": "pnpm run build:integration -- --watch",
+    "dev": "stencil build --watch --dev --serve --config stencil.config.dev.ts",
+    "build": "stencil build --docs --prod --config stencil.config.prod.ts",
+    "build:debug": "node --inspect-brk ../../node_modules/.bin/stencil build --debug --docs --config ./stencil.config.dev.ts",
+    "build:integration": "stencil build --config stencil.config.integration.ts",
+    "test": "pnpm stencil-test",
+    "test:watch": "pnpm stencil-test --watch",
+    "lint": "concurrently 'eslint \"src/**\"' 'stylelint \"src/**/*.css\" --config ./stylelint.config.mjs'",
+    "generate": "stencil generate"
+  }
+}

package/readme.md

@@ -114,7 +114,7 @@ Use the `start:dev` script to start Stencil's dev server.
 To build the components (and styles) for production, run the build script. This will also sync changes to the wrapper projects.
 
 ```bash
-npm run build
+pnpm run build
 ```
 
 ### Creating New Components
@@ -122,7 +122,7 @@ npm run build
 Always use the `lmvz-` prefix when creating new components!
 
 ```bash
-npm run @stencil/core generate lmvz-[component name]
+pnpm run @stencil/core generate lmvz-[component name]
 ```
 
 ### Testing

package/dist/cjs/aria-loader-BBKbBZLq.js

@@ -1,76 +0,0 @@
-'use strict';
-
-const GLOBAL_STATE_KEY = Symbol('__lmvzAriaValidationRuntimeState');
-const ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = 'lmvz:aria-validation-runtime-changed';
-function getRuntimeState() {
-    const globalState = globalThis;
-    if (!globalState[GLOBAL_STATE_KEY]) {
-        globalState[GLOBAL_STATE_KEY] = {
-            enabled: false,
-        };
-    }
-    return globalState[GLOBAL_STATE_KEY];
-}
-function notifyRuntimeChange() {
-    if (typeof window === 'undefined')
-        return;
-    window.dispatchEvent(new CustomEvent(ARIA_VALIDATION_RUNTIME_CHANGED_EVENT));
-}
-async function fetchRuntime() {
-    const state = getRuntimeState();
-    if (!state.enabled)
-        return null;
-    if (state.runtime)
-        return state.runtime;
-    if (!state.loadPromise) {
-        state.loadPromise = Promise.resolve().then(function () { return require('./index-QRnWYctw.js'); }).catch(() => null);
-    }
-    const runtime = await state.loadPromise;
-    if (runtime) {
-        state.runtime = runtime;
-    }
-    return runtime;
-}
-async function initializeValidation(...args) {
-    const runtime = await fetchRuntime();
-    const s = getRuntimeState();
-    if (!s.enabled)
-        return;
-    if (!runtime) {
-        console.warn('Failed to load aria validation runtime');
-        return;
-    }
-    runtime.initializeValidationStream(...args);
-}
-const isAriaValidationEnabled = () => getRuntimeState().enabled;
-const useVerboseLogging = () => getRuntimeState().verboseLogging ?? false;
-const enableAriaValidation = (options = {}) => {
-    const state = getRuntimeState();
-    if (state.enabled)
-        return;
-    Object.assign(state, options);
-    state.enabled = true;
-    initializeValidation().then(() => {
-        notifyRuntimeChange();
-    });
-};
-const disableAriaValidation = () => {
-    const state = getRuntimeState();
-    if (!state.enabled)
-        return;
-    state.enabled = false;
-    notifyRuntimeChange();
-};
-function queueValidation(...args) {
-    const state = getRuntimeState();
-    if (!state.enabled || !state.runtime)
-        return;
-    state.runtime.enqueueValidation(...args);
-}
-
-exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
-exports.disableAriaValidation = disableAriaValidation;
-exports.enableAriaValidation = enableAriaValidation;
-exports.isAriaValidationEnabled = isAriaValidationEnabled;
-exports.queueValidation = queueValidation;
-exports.useVerboseLogging = useVerboseLogging;

package/dist/cjs/component-CRc6eHcV.js

@@ -1,138 +0,0 @@
-'use strict';
-
-const componentOnReady = (el, callback) => {
-    if (el.componentOnReady) {
-        el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
-    }
-    else {
-        raf(() => callback(el));
-    }
-};
-const inheritAttributes = (el, attributes = []) => {
-    const attributeObject = {};
-    attributes.forEach(attr => {
-        if (el.hasAttribute(attr)) {
-            const value = el.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = el.getAttribute(attr);
-            }
-            el.removeAttribute(attr);
-        }
-    });
-    return attributeObject;
-};
-const ariaAttributes = [
-    'role',
-    'aria-activedescendant',
-    'aria-atomic',
-    'aria-autocomplete',
-    'aria-braillelabel',
-    'aria-brailleroledescription',
-    'aria-busy',
-    'aria-checked',
-    'aria-colcount',
-    'aria-colindex',
-    'aria-colindextext',
-    'aria-colspan',
-    'aria-controls',
-    'aria-current',
-    'aria-describedby',
-    'aria-description',
-    'aria-details',
-    'aria-disabled',
-    'aria-errormessage',
-    'aria-expanded',
-    'aria-flowto',
-    'aria-haspopup',
-    'aria-hidden',
-    'aria-invalid',
-    'aria-keyshortcuts',
-    'aria-label',
-    'aria-labelledby',
-    'aria-level',
-    'aria-live',
-    'aria-multiline',
-    'aria-multiselectable',
-    'aria-orientation',
-    'aria-owns',
-    'aria-placeholder',
-    'aria-posinset',
-    'aria-pressed',
-    'aria-readonly',
-    'aria-relevant',
-    'aria-required',
-    'aria-roledescription',
-    'aria-rowcount',
-    'aria-rowindex',
-    'aria-rowindextext',
-    'aria-rowspan',
-    'aria-selected',
-    'aria-setsize',
-    'aria-sort',
-    'aria-valuemax',
-    'aria-valuemin',
-    'aria-valuenow',
-    'aria-valuetext',
-];
-const inheritAriaAttributes = (el, ignoreList) => {
-    let attributesToInherit = ariaAttributes;
-    return inheritAttributes(el, attributesToInherit);
-};
-const raf = (h) => {
-    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-        return __zone_symbol__requestAnimationFrame(h);
-    }
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(h);
-    }
-    return setTimeout(h);
-};
-function getDeepActiveElement(root = document) {
-    let activeElement = root.activeElement;
-    if (!activeElement) {
-        return null;
-    }
-    while (activeElement && activeElement.shadowRoot) {
-        const next = activeElement.shadowRoot.activeElement;
-        if (!next) {
-            break;
-        }
-        activeElement = next;
-    }
-    return activeElement;
-}
-function canReceiveFocus(el) {
-    return (el instanceof HTMLElement && el.tabIndex >= 0 && !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true' && el.checkVisibility() && el.offsetParent !== null);
-}
-function findFormByRef(form, el) {
-    if (form instanceof HTMLFormElement) {
-        return form;
-    }
-    if (typeof form === 'string') {
-        const el = document.getElementById(form);
-        if (el) {
-            if (el instanceof HTMLFormElement) {
-                return el;
-            }
-            else {
-                console.warn(`No Form found with selector: "#${form}". Verify that the element with id exists and is actually a <form> element.`, el);
-                return null;
-            }
-        }
-        else {
-            console.warn(`No Form found with selector: "#${form}". Verify that the id is correct and the form is rendered in the DOM.`, el);
-            return null;
-        }
-    }
-    if (form !== undefined) {
-        console.warn(`The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, el);
-        return null;
-    }
-    return el.closest('form');
-}
-
-exports.canReceiveFocus = canReceiveFocus;
-exports.componentOnReady = componentOnReady;
-exports.findFormByRef = findFormByRef;
-exports.getDeepActiveElement = getDeepActiveElement;
-exports.inheritAriaAttributes = inheritAriaAttributes;

package/dist/cjs/element-activation-controller-DC_6T0Rt.js

@@ -1,31 +0,0 @@
-'use strict';
-
-class ElementActivationController {
-    host;
-    config;
-    constructor(host, config) {
-        this.host = host;
-        this.config = config;
-    }
-    hostDidLoad() {
-        if (!this.host.el.hasAttribute('tabindex')) {
-            console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
-        }
-        this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
-        this.host.el.addEventListener('click', this.handleActivation.bind(this));
-    }
-    handleKeyDown = (event) => {
-        if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
-            event.preventDefault();
-            this.handleActivation(event);
-        }
-    };
-    handleActivation = (event) => {
-        this.host.lmvzActivation.emit();
-        if (this.config?.localHandler) {
-            this.config.localHandler(event);
-        }
-    };
-}
-
-exports.ElementActivationController = ElementActivationController;