@neovici/cosmoz-input 6.0.0-beta.1 → 6.0.0-beta.3

package/dist/cosmoz-input.js

@@ -7,11 +7,12 @@ import { attributes, render } from './render';
 import { styles } from './styles';
 import { useAllowedPattern } from './use-allowed-pattern';
 import { useInput } from './use-input';
-import { getPlaceholder } from './util';
+import { defaultMax, getPlaceholder } from './util';
 const observedAttributes = [
     'type',
     'variant',
     'hint',
+    'error-message',
     'compact',
     'required',
     'pattern',
@@ -50,7 +51,7 @@ export const Input = (host) => {
 				@focus=${onFocus}
 				@blur=${onFocus}
 				min=${ifDefined(min)}
-				max=${ifDefined(max)}
+				max=${ifDefined(defaultMax(type, max))}
 				step=${ifDefined(step)}
 			/>
 		`, host);

package/dist/cosmoz-textarea.js

@@ -7,7 +7,15 @@ 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];
+const observedAttributes = [
+    'rows',
+    'placeholder',
+    'label',
+    'hint',
+    'error-message',
+    'required',
+    ...attributes,
+];
 export const Textarea = (host) => {
     const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
     useAutoHeight(host);

package/dist/cosmoz-toggle.js

@@ -88,5 +88,5 @@ const style = css `
 `;
 customElements.define('cosmoz-toggle', component(CosmozToggle, {
     styleSheets: [style, toggleStyles],
-    observedAttributes: ['disabled'],
+    observedAttributes: ['label', 'disabled', 'error'],
 }));

package/dist/render.js

@@ -15,9 +15,9 @@ export const render = (control, { hint, label, invalid, errorMessage, compact, r
 				${control}
 			</div>
 			<!-- compact: tooltip always visible, red icon when invalid -->
-			${when(invalid, () => html `<cosmoz-tooltip
+			${when(compact && invalid && errorMessage, () => html `<cosmoz-tooltip
 						placement="top"
-						description=${invalid ? errorMessage : label}
+						description=${errorMessage}
 						delay="300"
 					>
 						${infoCircleIcon({ width: '16px', height: '16px' })}

package/dist/styles.js

@@ -48,7 +48,7 @@ export const styles = css `
 	}
 
 	.wrap:has(#input:focus) {
-		box-shadow: 0 0 0 2px var(--cz-color-border-brand);
+		box-shadow: var(--cz-focus-ring);
 	}
 
 	:host([invalid]) .wrap {
@@ -56,7 +56,7 @@ export const styles = css `
 	}
 
 	:host([invalid]) .wrap:has(#input:focus) {
-		box-shadow: 0 0 0 2px var(--cz-color-border-error);
+		box-shadow: var(--cz-focus-ring-error);
 	}
 
 	.control {

package/dist/util.d.ts

@@ -2,4 +2,5 @@ interface Props {
     placeholder?: string;
 }
 export declare const getPlaceholder: ({ placeholder }: Props) => string;
+export declare const defaultMax: (type: string, max?: string) => string | undefined;
 export {};

package/dist/util.js

@@ -1,3 +1,4 @@
 export const getPlaceholder = ({ placeholder }) => {
     return placeholder || ' ';
 };
+export const defaultMax = (type, max) => max ?? (type === 'date' ? '9999-12-31' : undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "6.0.0-beta.1",
+	"version": "6.0.0-beta.3",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -76,7 +76,7 @@
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^20.0.0",
+		"@commitlint/cli": "^21.0.0",
 		"@commitlint/config-conventional": "^20.0.0",
 		"@neovici/cfg": "^2.8.0",
 		"@neovici/testing": "^2.3.0",
@@ -96,7 +96,7 @@
 		"lint-staged": "^16.2.7",
 		"semantic-release": "^25.0.2",
 		"shadow-dom-testing-library": "^1.13.1",
-		"sinon": "^21.0.0",
+		"sinon": "^22.0.0",
 		"storybook": "^10.1.9",
 		"vitest": "^4.0.18",
 		"@types/mocha": "^10.0.3",