@spectrum-web-components/underlay - npm Package Compare versions

Comparing version 0.6.8-alpha.40 to 0.6.8

custom-elements.json

@@ -22,3 +22,4 @@ {
               "default": "false",
-              "attribute": "open"
+              "attribute": "open",
+              "reflects": true
             }
@@ -111,10 +112,4 @@ ],
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "test/underlay.test-vrt.ts",
-      "declarations": [],
-      "exports": []
     }
   ]
 }

package.json

 {
     "name": "@spectrum-web-components/underlay",
-    "version": "0.6.8-alpha.40+c7dd897f",
+    "version": "0.6.8",
     "publishConfig": {
@@ -47,3 +47,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.6-alpha.40+c7dd897f",
+        "@spectrum-web-components/base": "^0.4.5",
         "tslib": "^2.0.0"
@@ -59,3 +59,3 @@ },
     ],
-    "gitHead": "c7dd897fd72154e0dd172b15c8b39c13670c7f25"
+    "gitHead": "e437f5c415e0fbd686258f641077a928b6e589af"
 }

README.md

@@ -25,1 +25,47 @@ ## Description
 ```
+
+## Example
+
+When leveraging an `<sp-underlay>` in conjunction with overlay content, place it as a sibling prior to your overlay content.
+
+```html
+<style>
+    sp-underlay:not([open]) + sp-dialog {
+        display: none;
+    }
+    sp-underlay + sp-dialog {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+        background: var(
+            --spectrum-dialog-confirm-background-color,
+            var(--spectrum-alias-background-color-default)
+        );
+    }
+</style>
+
+<sp-button
+    onclick="
+        console.log(this.nextElementSibling);
+        this.nextElementSibling.open = true;
+    "
+>
+    Open dialog with underlay element
+</sp-button>
+
+<sp-underlay></sp-underlay>
+<sp-dialog size="small">
+    <h1 slot="heading">Hello, I'm an overlay!</h1>
+    <p>Enjoy your day...</p>
+    <sp-button
+        slot="button"
+        onclick="
+            this.parentElement.previousElementSibling.open = false;
+        "
+    >
+        Close
+    </sp-button>
+</sp-dialog>
+```

src/spectrum-underlay.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/underlay.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/Underlay.js

@@ -31,4 +31,4 @@ /*
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], Underlay.prototype, "open", void 0);
 //# sourceMappingURL=Underlay.js.map

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 3 instances in 1 package

Improved metrics

Number of low license alerts

6

decreased by-33.33%

Number of lines in readme file

71

increased by184%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

41056

decreased by-12.16%

Number of package files

22

decreased by-24.14%

Lines of code

293

decreased by-16.05%

Dependency changes

• Updated@spectrum-web-components/base@^0.4.5