@neovici/cosmoz-input 5.5.1 → 5.6.1

package/dist/cosmoz-input.d.ts

@@ -1,5 +1,5 @@
+import { ObjectFromList, Render } from './render';
 import { BaseInput } from './use-input';
-import { Render, ObjectFromList } from './render';
 declare const observedAttributes: string[];
 type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
 export declare const Input: (host: CosmozInput) => import("lit-html").TemplateResult<1>;

package/dist/cosmoz-input.js

@@ -1,13 +1,13 @@
+import { component, sheet } from '@pionjs/pion';
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { live } from 'lit-html/directives/live.js';
 import { ref } from 'lit-html/directives/ref.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { component, sheet } from '@pionjs/pion';
-import { useInput } from './use-input';
+import { attributes, render } from './render';
+import { styles } from './styles';
 import { useAllowedPattern } from './use-allowed-pattern';
-import { render, attributes } from './render';
+import { useInput } from './use-input';
 import { getPlaceholder } from './util';
-import { styles } from './styles';
 const observedAttributes = [
     'type',
     'pattern',
@@ -52,4 +52,5 @@ export const Input = (host) => {
 customElements.define('cosmoz-input', component(Input, {
     observedAttributes,
     styleSheets: [sheet(styles)],
+    shadowRootInit: { mode: 'open', delegatesFocus: true },
 }));

package/dist/cosmoz-textarea.d.ts

@@ -1,5 +1,5 @@
+import { ObjectFromList, Render } from './render';
 import { BaseInput } from './use-input';
-import { Render, ObjectFromList } from './render';
 declare const observedAttributes: string[];
 type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
 export declare const Textarea: (host: CosmozInput) => import("lit-html").TemplateResult<1>;

package/dist/cosmoz-textarea.js

@@ -1,12 +1,12 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { live } from 'lit-html/directives/live.js';
 import { ref } from 'lit-html/directives/ref.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { component, sheet } from '@pionjs/pion';
-import { useInput } from './use-input';
-import { useAutoHeight } from './use-auto-height';
-import { render, attributes } from './render';
+import { attributes, render } from './render';
 import { styles } from './styles';
+import { useAutoHeight } from './use-auto-height';
+import { useInput } from './use-input';
 const observedAttributes = ['rows', 'placeholder', ...attributes];
 export const Textarea = (host) => {
     const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
@@ -24,4 +24,5 @@ export const Textarea = (host) => {
 customElements.define('cosmoz-textarea', component(Textarea, {
     observedAttributes,
     styleSheets: [sheet(styles)],
+    shadowRootInit: { mode: 'open', delegatesFocus: true },
 }));

package/dist/styles.js

@@ -69,6 +69,7 @@ export const styles = css `
 		line-height: var(--line-height);
 		font-family: var(--font-family);
 		caret-color: var(--focused-color);
+		cursor: text;
 	}
 
 	:host([disabled]) {
@@ -128,6 +129,7 @@ export const styles = css `
 		text-transform: var(--cosmoz-input-label-text-transform);
 		font-weight: var(--cosmoz-input-label-font-weight);
 		user-select: none;
+		cursor: text;
 	}
 
 	.wrap:has(#input:not(:placeholder-shown)) {

package/dist/use-input.js

@@ -1,31 +1,27 @@
-import { useCallback, useEffect, useRef } from '@pionjs/pion';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { useCallback, useEffect, useRef } from '@pionjs/pion';
 export const useInput = (host) => {
     const inputRef = useRef(undefined);
     const onRef = useCallback((el) => (inputRef.current = el), []);
-    const root = host.shadowRoot, onChange = useCallback((e) => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })), []), onInput = useCallback((e) => notifyProperty(host, 'value', e.target.value), []), onFocus = useCallback((e) => notifyProperty(host, 'focused', e.type === 'focus'), []), focus = useCallback(() => inputRef.current?.focus(), []), validate = useCallback(() => {
+    const root = host.shadowRoot, onChange = useCallback((e) => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })), []), onInput = useCallback((e) => notifyProperty(host, 'value', e.target.value), []), onFocus = useCallback((e) => notifyProperty(host, 'focused', e.type === 'focus'), []), validate = useCallback(() => {
         const valid = inputRef.current?.checkValidity();
         host.toggleAttribute('invalid', !valid);
         return valid;
     }, []);
-    useImperativeApi({ focus, validate }, [focus, validate]);
+    useImperativeApi({ validate }, [validate]);
+    // delegatesFocus doesn't cover clicks on slotted light-DOM content
     useEffect(() => {
         const onMouseDown = (e) => {
-            if (e.defaultPrevented ||
-                host.disabled ||
-                e.target.matches('input, textarea, label')) {
+            const target = e.composedPath()[0];
+            if (target?.closest?.('input, textarea'))
                 return;
-            }
-            e.preventDefault(); // don't blur
-            if (!host.matches(':focus-within')) {
-                // if input not focused
-                focus(); // focus input
-            }
+            e.preventDefault();
+            inputRef.current?.focus();
         };
         root.addEventListener('mousedown', onMouseDown);
         return () => root.removeEventListener('mousedown', onMouseDown);
-    }, [focus]);
+    }, []);
     return {
         onChange,
         onFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "5.5.1",
+	"version": "5.6.1",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -17,18 +17,17 @@
 	"license": "Apache-2.0",
 	"author": "",
 	"main": "dist/index.js",
-	"directories": {
-		"test": "test"
-	},
 	"files": [
 		"dist/"
 	],
 	"scripts": {
 		"lint": "tsc && eslint --cache .",
+		"check:duplicates": "check-duplicate-components",
 		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
-		"test": "wtr --coverage",
-		"test:watch": "wtr --watch",
+		"test": "vitest --run",
+		"test:storybook": "vitest --project=storybook --run",
+		"test:watch": "vitest",
 		"prepare": "husky",
 		"storybook:start": "storybook dev -p 8000",
 		"storybook:build": "storybook build",
@@ -77,16 +76,25 @@
 	"devDependencies": {
 		"@commitlint/cli": "^20.0.0",
 		"@commitlint/config-conventional": "^20.0.0",
-		"@neovici/cfg": "^2.0.0",
-		"@open-wc/testing": "^4.0.0",
+		"@neovici/cfg": "^2.8.0",
+		"@neovici/testing": "^2.3.0",
+		"@playwright/test": "^1.58.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"@storybook/web-components-vite": "^10.0.0",
-		"@types/mocha": "^10.0.3",
+		"@storybook/addon-docs": "^10.0.0",
+		"@storybook/addon-vitest": "^10.2.4",
+		"@storybook/web-components-vite": "^10.2.4",
+		"@types/node": "^25.2.3",
+		"@vitest/browser": "^4.0.18",
+		"@vitest/browser-playwright": "^4.0.18",
 		"http-server": "^14.1.1",
 		"husky": "^9.1.7",
+		"jsdom": "^28.0.0",
+		"lint-staged": "^16.2.7",
 		"semantic-release": "^25.0.2",
+		"shadow-dom-testing-library": "^1.13.1",
 		"sinon": "^21.0.0",
-		"storybook": "^10.1.9"
+		"storybook": "^10.1.9",
+		"vitest": "^4.0.18"
 	}
 }