@neovici/cosmoz-collapse - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/cosmoz-collapse.d.ts

@@ -5,6 +5,5 @@ declare class Collapse extends HTMLElement {
     constructor();
-    attributeChangedCallback(name: string, prevValue?: unknown, value?: unknown): void | (CSSStyleDeclaration & {
-        display: string;
-    });
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, prev?: unknown, value?: unknown): void;
 }
 export { Collapse };

dist/cosmoz-collapse.js

 import { toggleSize } from './toggle';
+const reset = (el, visible) => {
+    Object.assign(el.style, { display: visible ? '' : 'none' });
+};
 class Collapse extends HTMLElement {
@@ -9,5 +12,14 @@ static get observedAttributes() {
         super();
-        Object.assign(this.style, { display: 'none', overflow: 'hidden' });
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+      :host { display: block; overflow: hidden; }
+		`);
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.appendChild(document.createElement('slot'));
+        shadow.adoptedStyleSheets = [sheet];
     }
-    attributeChangedCallback(name, prevValue, value) {
+    connectedCallback() {
+        reset(this, this.getAttribute('opened') != null);
+    }
+    attributeChangedCallback(name, prev, value) {
         switch (name) {
@@ -18,3 +30,3 @@ case 'opened': {
                     ? this.toggle(this, visible)
-                    : Object.assign(this.style, { display: visible ? '' : 'none' });
+                    : reset(this, visible);
             }
@@ -21,0 +33,0 @@ }

dist/toggle.js

 const defaults = { duration: 250 };
 export const toggleSize = (prop) => (el, visible, opts) => {
     const maxSizeProp = 'max' + prop.charAt(0).toUpperCase() + prop.slice(1);
-    Object.assign(el.style, { [maxSizeProp]: '', display: 'block' });
+    Object.assign(el.style, { [maxSizeProp]: '', display: '' });
     const { [prop]: size } = el.getBoundingClientRect(), kf = [0, size], [from, to] = visible ? kf : kf.slice().reverse(), anim = el.animate([{ [maxSizeProp]: `${from}px` }, { [maxSizeProp]: `${to}px` }], { ...defaults, ...opts });
@@ -6,0 +6,0 @@ anim.onfinish = () => Object.assign(el.style, {

package.json

 {
 	"name": "@neovici/cosmoz-collapse",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "A simple dropdown web component",
@@ -29,3 +29,3 @@ "keywords": [
 		"test:watch": "wtr --watch",
-		"prepare": "husky install",
+		"prepare": "husky",
 		"storybook:build": "build-storybook",
@@ -63,12 +63,14 @@ "storybook:deploy": "storybook-to-ghpages"
 	"devDependencies": {
-		"@commitlint/cli": "^17.0.0",
-		"@commitlint/config-conventional": "^17.0.0",
+		"@commitlint/cli": "^19.0.0",
+		"@commitlint/config-conventional": "^19.0.0",
 		"@neovici/cfg": "^1.20.1",
+		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"husky": "^8.0.0",
-		"prettier": "^2.5.1",
-		"semantic-release": "^19.0.0",
-		"typescript": "^4.0.0"
+		"@types/mocha": "^10.0.6",
+		"husky": "^9.0.0",
+		"prettier": "^3.0.0",
+		"semantic-release": "^23.0.0",
+		"typescript": "^5.0.0"
 	}
 }

No alert changes

Improved metrics

Total package byte prevSize

15489

increased by2.49%

Lines of code

59

increased by22.92%

Worsened metrics

Dev dependency count

11

increased by22.22%

No dependency changes