@spectrum-css/opacitycheckerboard - npm Package Compare versions

Comparing version 1.1.6-next.1 to 1.1.6-next.2

package.json

 {
   "name": "@spectrum-css/opacitycheckerboard",
-  "version": "1.1.6-next.1",
+  "version": "1.1.6-next.2",
   "description": "The Spectrum CSS opacitycheckerboard component",
@@ -16,13 +16,10 @@ "license": "Apache-2.0",
   },
-  "main": "dist/index-vars.css",
+  "main": "dist/index.css",
   "peerDependencies": {
-    "@spectrum-css/tokens": ">=13"
+    "@spectrum-css/tokens": "^14.0.0-next.3"
   },
-  "devDependencies": {
-    "@spectrum-css/component-builder-simple": "^5.0.6-next.1"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2216cf58a18fb79d0cb987c485f7c4c177b7925f"
+  "gitHead": "35c5f608be3785b57e7cdfd982378fff080accc2"
 }

project.json

@@ -9,9 +9,9 @@ {
 		"compare": {},
+		"format": {},
 		"lint": {},
-		"validate": {},
-
 		"test": {
 			"defaultConfiguration": "scope"
-		}
+		},
+		"validate": {}
 	}
 }

stories/opacitycheckerboard.stories.js

@@ -22,2 +22,12 @@ import { html } from "lit";
 		},
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m"],
+			control: "select",
+		},
 	},
@@ -33,5 +43,3 @@ args: {
 		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("opacitycheckerboard")
-				? "migrated"
-				: undefined,
+			type: "migrated",
 		},
@@ -43,17 +51,37 @@ },
 };
-export const Default = Template.bind({});
-Default.args = {
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
-};
 
-export const CheckerboardPosition = Template.bind({});
+const CheckerboardDefault = (args) => html`
+	${window.isChromatic() ? html`
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				}
+			})}
+			<br>
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				},
+				size: "s",
+			})}
+	` : Template({
+			...args,
+			customStyles: {
+				"inline-size": "100%",
+				"block-size": "100%"
+			}
+		})}
+`;
+
+
+export const Default = CheckerboardDefault.bind({});
+Default.args = {};
+
+export const CheckerboardPosition = CheckerboardDefault.bind({});
 CheckerboardPosition.args = {
-	backgroundPosition: 'center center',
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
+	backgroundPosition: "center center",
 };
@@ -60,0 +88,0 @@ CheckerboardPosition.parameters = {

stories/template.js

@@ -15,2 +15,3 @@ import { html } from "lit";
 	content = [],
+	size,
 	role,
@@ -22,2 +23,3 @@ }) => {
 				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -24,0 +26,0 @@ })}

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35591

increased by23.01%

Dev dependency count

0

decreased by-100%

Number of package files

16

increased by6.67%

Lines of code

389

increased by23.89%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes